Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published2🌍 Public

Last edited Oct 30, 2020

Created on Oct 26, 2020

A face is drawn with SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows and nose, and an arc path for a mouth. The eyebrows and nose animate up and down using chained D3 transitions. The example uses D3.js v5, appending shapes to an SVG group centered in the canvas, with styling from a CSS file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face with black-outlined features is drawn in an SVG canvas, centered by a D3.js transform. The face includes a circle head, two eyes, rectangular eyebrows, and a semicircular mouth created with `d3.arc`. The eyebrows animate vertically using chained D3 transitions, moving up and down over two seconds each way. The example demonstrates basic SVG drawing and animation with D3 v5, using direct DOM selection and attribute manipulation.

BBenjamin Ogorek

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

95% match

Loading thumbnail…

Let's make a face with D3.js

A face rendered in SVG displays yellow circular head, eyes, eyebrows, and a mouth. D3 v5 code builds the face using `d3.select`, `d3.arc` for the mouth path, and appended `circle` and `rect` elements. Eyebrows animate with `transition.duration()`, moving them downward and back over two seconds each way, while the head and features remain static against a dark blue background.

GGeolffrey S Mena

95% match

Loading thumbnail…

Let's make a face with D3.js

A face built from basic SVG shapes—a yellow circle for the head, circles for eyes, and an arc-generated path for the mouth—is centered on a 960×500 canvas. The code uses D3.js v5’s `select` and `arc` APIs to append and position elements, with `transition()` animating the eyebrows up and down over two-second intervals. The rendering is entirely SVG, with all coordinates computed relative to the svg’s center using its width and height attributes.

BBen Daniel

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow face is drawn with D3.js as a set of SVG shapes, including a head, eyes, and eyebrows, centered in the viewport. The eyebrows animate, moving up and down in a two-second cycle using D3's `transition` API, while the mouth is created with an `arc` path. The example demonstrates basic shape construction and animation with the D3 v5 library, rendering in SVG.

Ffahmijaafar

95% match

Loading thumbnail…

Let's make a face with D3.js!

A face is drawn using simple SVG shapes: a large yellow circle for the head, with two smaller black circles for eyes positioned symmetrically around the center. The D3.js v5 library is used to select the SVG element and append these circles, with coordinates calculated from the SVG's width and height attributes. The example demonstrates basic D3 shape creation and attribute manipulation, with the rendering handled entirely by SVG in an HTML document.

Sshallowater

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

A yellow circular face with black eyes, eyebrows, and a curved mouth is drawn and animated using D3.js v5. The code builds the face with SVG shapes, positioning elements relative to the center of a 960×500 canvas. Eyebrows rise and fall repeatedly via chained `transition().duration(2000)` calls on the parent group. The mouth is generated using the `d3.arc()` helper with specified inner/outer radii and angular span, while the `select` API attaches elements to the SVG root.

PpilafGB62

95% match