Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
LLuce Liu
Last edited Jan 10, 2020
Created on Jan 10, 2020

This example shows a yellow smiley face drawn with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. It demonstrates fundamental D3.js DOM manipulation by selecting an `<svg>` element and appending groups for the eyes and eyebrows, using `d3.select` and `d3.arc` for the mouth path. The eyebrow movement relies on chained `transition().duration()` calls that adjust a `transform` attribute, while the face’s geometry is defined via static attributes for circles, rectangles, and the arc path.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG shapes whose eyebrows animate upward and then back down. It demonstrates basic DOM manipulation with D3.js. The code uses `d3.select` and `svg.append` to build the face's circle, eye, and rectangular eyebrow elements, while the mouth is drawn with the `d3.arc` path generator. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on the brows’ parent group, moving it up and then returning it to its original position.

Ccguibourg
98% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn in SVG, with eyebrows that animate upward and then return to their original position. The face is constructed through fundamental D3.js DOM manipulation, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` generator, while eyebrow movement relies on chained `transition().duration()` calls that modify a `transform` attribute. All shapes are centered within an SVG element sized 960 by 500 pixels.

DDan Mihaila
98% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built from SVG shapes, with its eyebrows smoothly sliding upward and then back down in a repeating animation. The code uses D3.js v5 selections to append a circle for the face, separate circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that update the group’s `transform` attribute.

Lliuleirain
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, whose eyebrows animate up and down in a looping motion. It demonstrates fundamental DOM manipulation using D3.js selections, appending a circle for the head, circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc()` helper for the mouth. The animation runs via chained `transition()` calls with `.duration(2000)` on the eyebrow group. The code imports `select` and `arc` from the `d3` module and uses `attr()` to set positions and styles.

Aalbanodossantos
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with its eyebrows animated to move up and down in a continuous loop. The example demonstrates basic DOM manipulation with D3.js, using `d3.select` and `d3.append` to build the face from circles, rectangles, and a path, then applying `transition().duration()` to animate the eyebrow movement. The mouth is created using the `d3.arc` shape generator, and the entire scene is centered within an SVG canvas of fixed dimensions.

FfacundoEMartin
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes has animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation, building the face with `select`, `append`, circles, rectangles, and a mouth path generated using the `arc` helper. Eyebrow motion is created through chained `transition().duration()` calls on a group element, while the face is centered using an SVG `transform`. The code uses D3 v5 modules and relies on static shape attributes rather than data binding.

MMMoronto
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face from primitives: circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Using D3's selection and transition methods, the eyebrows animate vertically over two seconds, then return, cycling through the eyebrow group's transform attribute. The example relies on d3.select, d3.arc, and chained transitions to compose and animate SVG shapes.

Jjhsu0811
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, where the eyebrows animate upward and then back down in a looping motion. The face is centered using a translated `<g>` group, with circles for the eyes and a D3 arc path for the mouth. It demonstrates fundamental DOM manipulation with D3 v5, using `select`, `attr`, and chained `transition().duration()` calls to move the eyebrow group. The animation runs continuously, shifting the eyebrows vertically by 50 pixels before returning to their original position.

PPiotrekW2
96% match