Skip to main content
SimilarExport ZIP
100%

Let's make a FACE with D3.js

✓ Published0🌍 Public
TTMorgan99
Last edited Jan 13, 2020
Created on Jan 12, 2020

An SVG face built from D3.js primitives—circles for the head and eyes, rectangles for brows, and an arc path for the mouth—appears on a teal background. The face is centered using SVG group transforms, with features positioned via computed coordinates. D3 transitions animate the eyes and mouth, moving them in a sequence of translate transformations over three-second durations. The styling comes from an external CSS file, while the D3 library (v5) handles both shape creation and the tweening of the SVG attributes.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

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.

PPourmahmood
93% match
Loading thumbnail…

Let's make a face with D3.js!

A face built from SVG primitives is drawn on a 960 by 500 canvas, with yellow circle head, black-outlined eyes, eyebrows, and a smile-shaped arc. The animation sequentially shifts the entire eyebrow group downward and then back upward over two seconds each using chained D3 transitions. The example demonstrates basic DOM manipulation via `d3.select` and `append`, constructing shapes with attributes, and moving elements with `transition().duration().attr()`, where the mouth is generated with the `d3.arc` generator.

Nnoelmiranda
93% match
Loading thumbnail…

Let's make a face with D3.js!

A stylized face constructed from SVG primitives animates through a sequence of mood shifts. D3.js v5 selects the SVG canvas and uses chained `transition().duration()` calls to tween the circle's fill, reposition the eyes with translate transforms, drop and raise the eyebrows, and rotate the mouth path. The face is drawn with geometric shapes including circles, rectangles, and an arc path generated via `d3.arc()`.

Ssrrajendran
92% match
Loading thumbnail…

Let's Make a Face with D3.js

This example animates a simple cartoon face built entirely with SVG shapes in D3.js. Shown head-on, the face consists of a circular head, two eyes, rectangular eyebrows, and an arc-based mouth, all centered within an SVG canvas. The eyebrows repeatedly bounce upward and downward using chained `transition` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs, constructing the face by appending circles, rectangles, and paths to a translated group element.

Tthespiraltree
92% match
Loading thumbnail…

Let's make a Face with D3.js

A static SVG face built with D3.js includes circles for eyes, a path for a mouth, and rectangular eyebrows, all positioned using the `arc` generator and SVG attributes. Clicking an "Eye me!" button triggers a `transition` on the eyebrows group, moving them upward and back down over two 2-second intervals. The example uses D3 v5 modules like `select`, `arc`, and `transition.attr` to animate the facial expression, demonstrating object and array handling in JavaScript.

IImmaculata-Mary Muoghalu
92% match
Loading thumbnail…

Let's make a face with D3.js

This D3.js example builds a cartoon face entirely out of SVG primitives—circles for eyes and the head, rectangles for eyebrows, and an arc path for the mouth. The face is centered in an SVG canvas using a group transform. The code animates the eyebrows with sequential `transition().duration(2000)` calls, moving them upward and back down. It relies on standard D3 v5 methods like `select`, `append`, and `attr`, using the `arc` helper to generate the mouth’s path data within the SVG.

WWhatTheFork85
92% match
Loading thumbnail…

Let's make a face with D3.js

This D3.js example builds a cartoon face entirely out of SVG primitives—circles for eyes and the head, rectangles for eyebrows, and an arc path for the mouth. The face is centered in an SVG canvas using a group transform. The code animates the eyebrows with sequential `transition().duration(2000)` calls, moving them upward and back down. It relies on standard D3 v5 methods like `select`, `append`, and `attr`, using the `arc` helper to generate the mouth’s path data within the SVG.

WWhatTheFork85
92% match
Loading thumbnail…

Let's make a face with D3.js

This example builds an animated face from scratch using D3.js v5 and SVG. It shows how basic geometric elements can be combined into a playful character, with each facial feature positioned and styled through D3’s data-binding and attribute manipulation. The code uses `d3.select` to target the SVG container and appends shapes like circles and paths, while `d3.forceSimulation` is not present; instead, simple static coordinates and CSS transitions animate the features. The face appears centered on a 960×500 canvas, with the stylesheet hiding page margins for a clean presentation.

Ffredferramenta
92% match