Skip to main content
SimilarExport ZIP
100%

Let's make a Face with D3.js

✓ Published2🌍 Public
IImmaculata-Mary Muoghalu
Last edited Apr 17, 2021
Created on Apr 16, 2021
Forked from Shapes with SVG

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.

AI-generated description

An example tutorial of how to use Javascript objects, arrays, and modules.

MIT Licensed

Similar vizzes

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 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 smiling face rendered in SVG uses D3.js selection methods to append and position circles, rectangles, and an arc-based mouth. The eyes and eyebrows are grouped and translated, with D3 transitions animating the eyebrow group upward and back over two seconds. The animation repeats once, moving the eyebrows through a vertical range to create a surprised expression. D3's `select`, `arc`, and chained `transition` and `attr` methods drive the DOM manipulation, while the page loads D3 v5 from a CDN.

AArcy Flores
92% match
Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face out of basic SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth—all centered within an SVG canvas using D3.js v5. The code imports `select` and `arc` from the D3 library to append elements and compute the mouth’s path. A chained `transition().duration(2000)` sequence animates the eyebrows up and down, creating a winking expression. The layout uses fixed numeric constants for spacing and offsets, with no external data source.

Rracoo
92% match
Loading thumbnail…

Let's make a Face with D3.js

A smiling face rendered in SVG with D3.js animates its eyebrows in a repeating up-and-down motion. The code builds the face from basic shapes: a yellow circle for the head, two black circles for eyes, and an arc path for the mouth, all positioned within a centered group. D3 transitions, using `transition.duration` and chained `.attr` calls, move the eyebrow rectangles between two vertical positions over two-second intervals, creating a winking-like effect. The example uses D3 v5 selectors, the `arc` generator, and SVG attributes.

Jjerz-0788
92% match
Loading thumbnail…

Let's make a FACE with D3.js

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.

TTMorgan99
92% match
Loading thumbnail…

Let's make a face with D3.js

A playful SVG face is assembled from basic D3.js shapes, including circles, ellipses, rectangles, and an arc-based mouth. The code uses D3 selections to build each feature, with separate groups for eyes, pupils, and eyebrows. A button triggers an animation on the right eyebrow, which transitions its vertical position using `transition.attr`. The example demonstrates how to combine D3’s `arc` generator for the mouth and apply event-driven transitions within a React framework.

Jjijou31
92% match