Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Apr 25, 2020

Created on Apr 25, 2020

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

A D3.js example builds a yellow smiley face with eyes, eyebrows, and an arc-based mouth, then animates the eyebrows upward and back down using chained `transition` calls on SVG `rect` elements. The face is centered via a `g` transform, with `d3.arc` generating the mouth path. The code selects an SVG, appends shapes with explicit pixel offsets, and relies on D3 v5’s `select`, `attr`, and `transition` APIs to demonstrate fundamental DOM manipulation and animation.

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

97% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with SVG shapes demonstrates D3.js v5 DOM manipulation and chained transitions. The code uses `d3.select`, `append`, and `attr` to construct a yellow circle with eyes, rectangular eyebrows, and an arc-based mouth via `d3.arc()`. A two-step `transition().duration(2000)` sequence moves the eyebrow group up and down, creating an animated expression. The example relies on D3’s data-join-free imperative style, directly targeting SVG elements within a 1000×500 viewport without external data.

Ssrrajendran

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 upward and downward in a looping motion. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending groups for positioning, and constructing circles, rectangles, and an arc-based mouth using `d3.select`, `d3.arc`, and chained `transition().duration()` calls. The face is centered via a translated group, with all coordinates calculated relative to the viewport dimensions.

Ggcappadaniel

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 D3.js animation builds a yellow smiley face with a black outline, two eyes, and a mouth, then animates its eyebrows upward and downward using chained `transition` calls. The SVG is constructed by selecting the root element, setting a viewBox of 960 by 500, and translating a group to the center. The code uses D3’s `select`, `arc`, and `transition` APIs to draw circles, rectangles, and a path, with the mouth as an arc.

MMukund Khandelwal

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, demonstrating basic SVG element creation and animation. A circle forms the head, with two eyes and a mouth drawn using the `arc` generator. The eyebrows, rendered as rectangles, automatically move up and down through chained `transition` calls set to a two-second duration. The code uses d3-selection to append and style shapes within a central group, transforming coordinates to center the face on the canvas.

Ssreeanthrds

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn and animated entirely in SVG using D3.js v5. The code selects the svg element and appends a group, then positions circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth. The eyebrows animate upward and back via chained `transition().duration(2000)` calls on the group’s `transform` attribute. The example demonstrates basic DOM manipulation, shape creation, and transition sequencing with d3-selection and d3-shape’s `arc` generator.

Ggcappadaniel

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