Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
LLaurentVuillon
Last edited Dec 25, 2019
Created on Dec 25, 2019

This interactive visualization builds a smiling face with D3.js, using SVG shapes for the head, eyes, eyebrows, and mouth. It demonstrates fundamental DOM manipulation and chained transitions by animating the eyebrows and mouth up and down in a looping sequence. The code leverages D3’s `select`, `append`, and `attr` methods to construct the scene, while the `transition().duration()` API drives the two-second animated movements. A static yellow circle, black-stroked head, and arc-based mouth are also defined using D3’s `arc` helper, all rendered on a 960-by-500 SVG canvas.

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!

A yellow smiley face is drawn with D3.js using SVG shapes, including circles for the eyes and an arc for the mouth. The eyebrows, rendered as rectangles, animate up and down in a repeating two-second cycle via chained `transition()` calls. The visualization demonstrates fundamental DOM manipulation with D3 selections and the `arc` generator, using a static dataset defined inline. The face is centered on a 960×500 SVG canvas with the body constrained to no margins or overflow.

BblakeCS
95% 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
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a simple animated smiley face in SVG. The code builds the face from basic shapes—a yellow circle for the head, two eyes, eyebrows, and an arc-based mouth—and demonstrates D3's DOM manipulation and transition API. The eyebrows animate by moving up and down via chained `transition().duration(2000)` calls on the SVG group containing the rectangles, shifting the group's transform attribute. The visualization uses `d3.select` and `d3.arc` to generate the mouth path, with all elements centered in a 960-by-500 canvas.

Ssathesujit
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes demonstrates fundamental D3.js DOM manipulation. The code selects an SVG element and appends yellow circles for the head and eyes, black rectangles for eyebrows, and an arc-based path for the mouth. Using `d3.transition` with a two-second duration, the eyebrows animate upward and then back down, creating an expressive movement. The example uses D3 v5's `select`, `append`, and `attr` methods to build and update elements, with the mouth drawn via `d3.arc`.

KKhalid
95% match
Loading thumbnail…

Let's make a face with D3.js!

This visualization uses D3.js to construct a simple smiley face from SVG shapes, including a yellow circle for the head, paired eyes, and an arc-based mouth. It demonstrates fundamental DOM manipulation by appending elements to a centered group. The code defines geometric constants for spacing and sizing, then uses chained `transition` calls with a two-second duration to animate the rectangular eyebrows moving up and down. Rendering is done entirely through SVG attributes set via D3 selections, with no external data source, highlighting basic shape creation and animation techniques in d3 v5.

KKevinw97
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiling face. A yellow circle forms the head, with black-outlined eyes, rectangular eyebrows, and an arc-shaped mouth. The animation uses D3’s `transition` method to repeatedly move the entire eyebrow group up and down over two-second intervals, creating a blinking effect. The SVG scene is centered using the `attr` transform, and all shapes are appended to the SVG canvas with hardcoded dimensions and positions.

Ddktaylor916
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiling face. A yellow circle forms the head, with black-outlined eyes, rectangular eyebrows, and an arc-shaped mouth. The animation uses D3’s `transition` method to repeatedly move the entire eyebrow group up and down over two-second intervals, creating a blinking effect. The SVG scene is centered using the `attr` transform, and all shapes are appended to the SVG canvas with hardcoded dimensions and positions.

Ddktaylor916
95% 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
95% match