Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published0🌍 Public
Lluckytrue
Last edited Mar 19, 2020
Created on Mar 19, 2020

A cheerful yellow face, built from SVG primitives, blinks its rectangular eyebrows up and down repeatedly. The example uses D3.js v5 selections and transitions to animate the facial features. A circle forms the head, two circles serve as eyes, and an arc path, generated with the `d3.arc()` helper, creates the mouth. The code constructs the face by appending SVG elements to a group and animates the eyebrows with chained `transition().duration()` calls.

AI-generated description

Loading the d3 script from UNPKG puts a d3 variable in the global namespace. (Take out "browse" from that link to load it.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face built with SVG primitives uses D3.js v6 to assemble circles, rectangles, and an arc-based mouth from the `d3.arc` API. The face is centered via an SVG group translation, with eyes and eyebrows positioned using explicit offsets. A `transition().duration(2000)` sequence animates the eyebrow group by shifting its `transform` attribute upward and back, creating a subtle blinking or raising motion. The rendering is entirely SVG-based, with static geometry defined in the initial state.

Xxsg13
96% match
Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face constructed with SVG elements in D3.js demonstrates chained transitions. The code builds a centered group containing a circle for the head, two circles for eyes, and rectangles for eyebrows, all with fixed coordinates and styling from CSS classes. A mouth uses the `d3.arc()` path generator with specified angles. The eyebrows animate through a `transition.attr()` sequence, moving down and up over two one-second intervals. The example imports `select` and `arc` from D3 v7 and renders entirely as static SVG shapes with programmed motion.

JJadeITNT
96% match
Loading thumbnail…

Let's make a face with D3.js

A cheerful SVG face is drawn using D3.js v5, with a yellow circle for the head, eyes, eyebrows, and a mouth created via the d3.arc path generator. The eyebrows animate upward and downward using chained transition calls with a two-second duration each, shifting their group’s transform attribute. All shapes are appended to a centered g element, with positions set through absolute pixel offsets for facial features.

GGeolffrey S Mena
96% match
Loading thumbnail…

Let's Make a face with D3.js

A cheerful yellow SVG face is drawn using D3.js v5, with a circular head, eyes, eyebrows, and an arc-based mouth. The eyebrows animate vertically via `transition().duration(2000)`, moving down and up in a repeating sequence. The code uses D3’s `select` and `arc` helpers to construct shapes, with coordinates set relative to the SVG’s center. All elements are rendered as SVG primitives, and the animation demonstrates chained transitions on grouped elements.

Kkiyahw1
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black-outlined features forms a smiling face. The D3.js code builds the face using SVG primitives: a circle for the head, two circles for eyes, and arcs from `d3.arc()` for eyebrows and a mouth. An animation sequence uses chained `transition()` calls with 1000-millisecond durations to repeatedly raise and lower the eyebrows, creating a winking or surprised expression. The example demonstrates basic SVG drawing and simple timeline-based animation in D3 v5.

Dddperdue
96% match
Loading thumbnail…

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver
95% match
Loading thumbnail…

Let'S make a face with D3.js

This example uses D3.js v5 to construct an animated face entirely from SVG primitives. It draws a yellow circle for the head, adds two black eyes and rectangular eyebrows, then creates a mouth using an `arc()` path generator. The eyebrows are animated with a two-second `transition()` that shifts them up and down before returning to their original position. The code relies on D3's `select`, `append`, and attribute methods to build and manipulate the SVG scene.

AArnaud Gbaguidi
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a friendly yellow face built entirely with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. The face is constructed using D3.js v5 selections to append a circle for the head, additional circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The code uses `transition()` with a 2000-millisecond duration to animate the eyebrow group’s `transform` attribute. All elements are centered within an SVG canvas using a translation transform, and the styling is handled by an external stylesheet.

Ddacoylo
95% match