Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
EEL MAHI Moncef
Last edited Feb 7, 2019
Created on Feb 6, 2019

This example builds a cheerful yellow smiley face using D3.js v5, rendered as SVG elements. The face is composed of circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The code demonstrates fundamental DOM manipulation with `d3.select` and `d3.append`, while `d3.arc` creates the mouth shape. An animation driven by chained `transition` and `attr` methods moves the eyebrows up and down over a four-second cycle, showcasing how D3 transitions can animate SVG attributes.

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!

D3.js constructs an animated smiley face by manipulating SVG shapes. A yellow circle forms the head, with two static eyes and a mouth drawn using the `arc` path generator. The eyebrows, rendered as rectangles, animate upward and downward over two seconds using chained `transition().duration()` calls on the SVG group, demonstrating fundamental DOM selection and attribute mutation. The code uses the `select` API to target the root SVG element.

EEL MAHI Moncef
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, animating its eyebrows upward and downward in a looping motion. It demonstrates fundamental DOM selection and manipulation using `d3.select`, `d3.arc` for the mouth, and chained `transition().duration()` calls to move SVG elements. The face is constructed from basic SVG shapes—circles, rectangles, and a path—positioned via `attr` transforms within a centered group. The code uses D3 v5 and renders entirely in SVG without external data.

SSteveberrey
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face with D3.js, demonstrating fundamental DOM manipulation and animated transitions. Using SVG elements, it constructs a yellow circle head, two eyes, rectangular eyebrows, and an arc-shaped mouth via the `arc()` generator. The code selects the SVG and appends groups to position features, then uses `transition().duration()` to animate the eyebrows upward and back down over four seconds. The example showcases D3 v5’s data-join-free approach, relying on direct selection, attribute setting, and chained transitions to create a simple, expressive character animation.

KKurt J Nilsen
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face, rendered with SVG shapes, demonstrates fundamental DOM manipulation and animated transitions in D3.js. The example builds the face using appended `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` generator. Both eyebrows, created as rectangles, move up and down through chained `transition()` calls on their containing group, each lasting two seconds and alternating between two vertical offsets. The code uses D3 v5 selection methods and `attr` to position elements, with no external data source, purely illustrating programmatic shape creation and animation.

JJordan Chiu
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, showing how to build and animate SVG shapes through fundamental DOM manipulation. The face is composed of circles for the eyes and an arc-generated mouth, while the code uses `transition.attr` to move its rectangular eyebrows up and down over two-second intervals. It uses D3 v5’s `select`, `attr`, `append`, and `arc` API to construct the scene, with all elements centered via an SVG `<g>` transform. The animation repeats once, demonstrating chained transitions on SVG attributes.

Wwen787
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, showing how to build and animate SVG shapes through fundamental DOM manipulation. The face is composed of circles for the eyes and an arc-generated mouth, while the code uses `transition.attr` to move its rectangular eyebrows up and down over two-second intervals. It uses D3 v5’s `select`, `attr`, `append`, and `arc` API to construct the scene, with all elements centered via an SVG `<g>` transform. The animation repeats once, demonstrating chained transitions on SVG attributes.

Wwen787
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example illustrates fundamental DOM manipulation with D3.js by building a smiley face from SVG primitives. A yellow circle forms the head, with two eye circles, a mouth path created using the `arc` generator, and rectangular eyebrows. The animation uses chained `transition()` calls to animate the eyebrow group's `transform` attribute upward and then back down over two seconds each, creating a simple moving expression. The code relies on `svg.append`, `.attr`, and D3's selection and transition APIs, rendering entirely through SVG without external data.

Mmariamy
96% match