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

100%

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

✓ Published0🌍 Public

Last edited May 24, 2022

Created on May 24, 2022

Forked from Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by drawing a smiley face with yellow circular head, eyes, eyebrows, and an arc-based mouth. The animation shows the eyebrows moving up and down repeatedly, using D3's transition system to create a two-second duration tween between transform states. The code imports `select` and `arc` from the D3 library, builds SVG shapes through chained `.attr()` calls, and relies on `d3.v5` with SVG rendering.

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!

This example builds a yellow smiley face with D3.js version 5, demonstrating fundamental DOM manipulation and animation. It constructs the face using SVG circles for the eyes and an `arc` generator for the mouth, while the eyebrows are rectangles that move via chained `transition().duration()` calls. The code uses D3’s `select` to bind to an SVG element and positions elements through translation transforms. The animation cycles the eyebrows up and down over two-second intervals, showcasing basic enter-update-exit patterns without any external data source.

ZZaid0914

96% 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

96% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes. A yellow circle, two eyes, a mouth drawn using the `d3.arc` function, and rectangular eyebrows are all appended to an SVG container. The eyebrows animate by moving up and down through a chained `transition` with `attr` changes, using a two-second duration for each movement. The code uses D3 v5’s `select` and `arc` methods, with the animation running once on load.

Llerik03

96% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face with animated eyebrows. The face is built using SVG shapes, including circles for the eyes and a path generated with the `d3.arc` function for the mouth. Eyebrows are rendered as rectangles and animated using chained `transition` calls with `duration` to move them up and back down. The code imports `select` and `arc` from the D3 v5 library, and positions elements relative to the SVG’s center using attribute setters and transform strings.

CColten Appleby

96% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a yellow circle head, eyes, a line nose, and an arc mouth. The code animates the eyebrows using chained `transition().duration()` calls, moving them upward and back down over two seconds. It uses D3 v5’s `select` to target the SVG element and `arc` to generate the mouth path, with all elements appended to a centered group. The rendering relies entirely on SVG and animation, with no external data source.

Mmivan000

96% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows, rendered as rectangles, animate upward and then back down through chained `transition().duration()` calls. The code imports `select` and `arc` from D3 v5, uses SVG elements for rendering, and relies on data-driven attributes to position features relative to the viewport dimensions.

RRadhika Ganapathy

96% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with animated eyebrows. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows—rendered as rectangles—move up and down through a chained `transition().duration(2000)` sequence, shifting the transform attribute over time. The code uses D3 v5 selection methods like `append` and `attr`, plus the `arc` generator from the `d3` module, all rendered as SVG elements.

AAmandineM97

96% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with animated eyebrows. The face is constructed using SVG elements, including a yellow circle for the head, two circles for eyes, and an arc-generated mouth. The eyebrows, rendered as rectangles, move up and down using chained `transition().duration()` calls to create a looping animation. The code uses D3 v5’s `select`, `arc`, and transition APIs to handle element creation and animation.

DDanyalMazhar

96% match