Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Mmwhiten
Last edited Dec 4, 2020
Created on Dec 4, 2020
Forked from HTML Starter

This example builds a smiling face in SVG using D3.js v5, with a yellow circle for the head, two eyes, and an arc-shaped mouth drawn via `d3.arc()`. The eyebrows are rectangles that animate up and down repeatedly using chained `transition().duration()` calls, creating a winking or surprised effect. The entire face is centered by translating a group element to the middle of an 800×400 SVG canvas, with dimensions read from the SVG attributes and hard-coded offsets for facial features.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

Fforcox43
96% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face built from SVG shapes animates in D3.js v5. A yellow circle forms the head, with eyes, animated eyebrows that move up and down via chained `transition` calls, and a mouth drawn as an arc path using `d3.arc()`. The code positions elements within a group translated to the canvas center, using fixed pixel dimensions for features.

Ppkcesar
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is rendered as a yellow circle with black eyes, animated eyebrows, and a curved mouth built from an arc path. The code uses D3 v5 selections to append SVG shapes, and chains `transition().duration()` calls to move the rectangular eyebrows up and down. The mouth is generated with the `d3.arc()` helper, specifying inner and outer radii and angular extents. Static circle elements define the face and eyes, while the animation runs once on load in a React framework.

Llittlenanopichu
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face is drawn with SVG, using D3.js to generate circles for eyes and an arc for the mouth. The animated eyebrows, rendered as rectangles, move up and down via chained `transition` calls on a group element. The code imports `select` and `arc` from D3 v5 and runs within a React framework, with the SVG canvas sized 960 by 500 pixels. Transforms center the face and position facial features relative to the middle of the canvas.

TThomas Seberechts
95% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face is drawn as a yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth, all rendered in SVG. The animation uses D3 transitions to move the eyebrows up and down over two seconds. The code leverages `d3.select`, `d3.arc`, and SVG `circle`, `rect`, and `path` elements within a fixed 960×500 viewport, with the face centered via a group transform.

NNkwachi Abel
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle head, two eyes, animated eyebrows, and an arc-based mouth. The code constructs the face with `d3.select`, `append`, and `d3.arc` for the mouth path, while the eyebrows animate up and down using `transition().duration()`. All elements are centered within an SVG canvas using a translated group, and the rendering relies entirely on SVG attributes rather than external data.

VVito
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with a smiling mouth and two eyes forms a cartoon face, rendered as an animated SVG. The code builds the face using D3.js v5 selections, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows moving in a sequence of positions. The face is centered within a 960×500 SVG canvas, with circles, rectangles, and a path grouped together.

Ccathykan
95% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js example assembles a smiling face from primitive SVG shapes: a yellow head circle, two eye circles, rectangular eyebrows, and a mouth formed by an annulus arc path. The scene is vertically centered using a group translation, and the right eyebrow demonstrates the library's chained transition API by animating its vertical position in two sequential 2-second movements. The code imports `select` and `arc` from D3 v5 and applies SVG attributes directly within a React-based build.

Jjcintolo
95% match