Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js!

✓ Published0🌍 Public
CCrystal Hsu
Last edited Sep 18, 2023
Created on Sep 18, 2023

This interactive visualization uses D3.js to construct a simple smiley face, featuring a yellow head, eyes, eyebrows, and a mouth. The primary focus is on demonstrating fundamental DOM manipulation through the `select` and `append` methods. The eyebrows animate, moving up and then back down via chained `transition().duration(2000)` calls. The visualization renders as SVG and also includes a linked YouTube video. All shapes are created programmatically, with the mouth path defined using the `d3.arc` generator.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The face is constructed with SVG circles, rectangles, and an arc-generated mouth, all positioned relative to the center of the viewport. The eyebrows use chained `transition().duration()` calls to move vertically and back, creating a blinking effect. The code imports `select` and `arc` from D3 v5 and builds the visualization entirely through SVG attributes.

CCharlene Ong
96% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This visualization demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face. A yellow circle with a black stroke forms the head, while two smaller circles serve as eyes, and a path drawn with `d3.arc()` creates the mouth. The eyebrows, rendered as rectangles, move up and down repeatedly using chained `transition().duration()` calls, animating their `transform` attributes over two-second intervals. The scene uses an SVG canvas and relies on D3 v5.9.2 for element selection, creation, and animation.

AAndreas Papastergiou
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This visualization demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face from basic SVG shapes. A yellow circle forms the head, with black circles for eyes, rectangles for eyebrows, and an arc-generating path for the mouth. The eyebrows animate vertically using chained `transition()` calls over two-second intervals. The example uses D3 v5 selection methods like `select` and `append`, alongside the `arc` generator, all rendered within a plain SVG element.

Ttmorgante
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows. The code uses D3 v5 selections to append SVG circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered via a transformed group. The eyebrows transition vertically over two 2-second intervals using chained `transition().duration()` calls, moving up and then back down. The visualization showcases how D3 can create and animate geometric shapes through declarative SVG attribute setting.

AApril Fangzhu Guo
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This animated D3.js visualization demonstrates fundamental DOM manipulation by constructing a smiley face with yellow circular face, black-outlined features, and animated eyebrows. Using SVG selections and transitions, the eyebrows move up and down in a repeating two-second cycle, while the face is built from basic geometric shapes—circles for eyes, rectangles for brows, and an arc for the mouth. The code showcases D3's data-agnostic DOM methods, including `select`, `append`, `attr`, and `transition`, all centered around a fixed coordinate system. The result is a clean, playful example of how D3 can create simple yet expressive animations entirely through code.

Ppavan vasamsetti
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face with yellow circular head, black-outlined eyes, and an arc-based mouth. Animation brings the face to life as the eyebrows, drawn as rectangles, move upward and downward through chained `transition().duration(2000)` calls on the group element containing them. The visualization uses D3 v7 with SVG output, constructing the face within a centered `<g>` group and positioning features relative to the viewport dimensions. The code explicitly imports `select` and `arc` from the D3 library, with the mouth path generated using `d3.arc()` with specified inner and outer radii and angle bounds.

Ddok0086m
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, featuring two circular eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows animate upward and then return to their original position over two sequential two-second transitions. The visualization uses D3 v5’s `select`, `append`, and `transition` methods to manipulate SVG elements, with coordinates computed from the viewport dimensions. The mouth is generated using the `arc` generator with specified inner and outer radii and angle values.

DDharanitharan-J
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example creates an animated smiley face using D3.js v5. The visualization renders a yellow circle head with eyes, eyebrows, and a mouth as SVG elements. The eyebrows animate by moving up and down over two seconds using D3's transition system. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending shapes with attributes like position and fill color. It also uses D3's arc function to generate a path for the mouth.

JJyothicherukuri
95% match