Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Lloisasy
Last edited Jan 21, 2020
Created on Jan 20, 2020
Forked from Untitled

This example uses D3.js to construct a cartoon face from basic SVG shapes—circles for eyes, rectangles for eyebrows, and a path for the mouth. The face is centered within a 960x500 SVG canvas, and the code animates the eyebrows by chaining `transition()` calls over two seconds to move them up and down. It imports `select` and `arc` from D3, using the `arc` API to generate the mouth's inner and outer radius path. The result is a simple, playful demonstration of D3’s shape creation and animation capabilities.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

This example builds a simple cartoon face from basic SVG shapes, including circles for the head and eyes, rectangles for eyebrows, and a path for the mouth. The face is grouped and centered within the SVG canvas. The animation is driven by D3 transitions, which sequentially move the eyebrows downward over two-second intervals. The code uses D3 v5's selection, arc, and transition APIs to construct and animate the elements, with the mouth generated using the `d3.arc` geometry generator to create a curved path.

Ssingularity6033
95% 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
94% 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
94% 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
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example constructs a cartoon face from primitive SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a semicircular path for the mouth. Animated with D3.js v5 transitions, the eyebrows move down and up over four seconds, creating a simple expressive gesture. The code uses `d3.select`, `d3.arc`, and chained `.transition().attr()` calls to build and animate the face within an SVG canvas.

OOckiya Beinmonyu Daniel
94% match
Loading thumbnail…

Let's make a face with D3.js!

A cheerful cartoon face built from SVG shapes appears, with eyes, animated eyebrows, and a smile. The eyebrows continuously slide down and back up using chained D3 transitions. The example demonstrates composing geometric primitives—circles, rectangles, and an arc-based mouth—within a centered group, all rendered in clean SVG. It uses D3 v5's selection and arc APIs, with React as the surrounding framework and JavaScript handling the animation.

Mmatthewfresh
94% 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
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and back down over two seconds via chained `transition()` calls. All elements are centered using an SVG `<g>` group with a translation transform, and the code imports `select` and `arc` from D3 to manipulate the DOM and generate the mouth path. The face is static except for the looping eyebrow movement.

IIan Perry
94% match