Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
AAndres Bizzarri
Last edited Jan 3, 2020
Created on Jan 3, 2020

A yellow smiley face with black features is rendered in SVG, and its eyebrows move up and down repeatedly. The example demonstrates fundamental D3.js DOM manipulation by selecting the `svg` element and appending groups, circles, and rectangles for the face, eyes, and eyebrows. A `path` built with `d3.arc` forms the mouth. Perpetual eyebrow motion is achieved using chained `transition().duration(2000)` calls that alternate the transform attribute. The face is centered via a translate transform on a group element.

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 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.

LLuce Liu
96% 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
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that move up and down using D3.js transitions. The example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth to a group, with the eyebrow movement created through chained `transition().duration()` calls that alter the group’s transform.

Ffiona187412
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that move up and down using D3.js transitions. The example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth to a group, with the eyebrow movement created through chained `transition().duration()` calls that alter the group’s transform.

Ffiona187412
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring animated eyebrows that move up and down. The code selects the SVG element, appends circles for the face and eyes, rectangles for the eyebrows, and an arc for the mouth using d3.arc. Eyebrow movement is achieved through chained transition().duration() calls that shift their vertical position. The example demonstrates fundamental DOM manipulation with D3's select and append methods, using static attributes and no external data.

VVito
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

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