Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3

✓ Published0🌍 Public
Aannadehtiarova
Last edited Feb 8, 2020
Created on Feb 8, 2020
Forked from Untitled

A face made of SVG shapes—a circle head, elliptical eyes, rectangular eyebrows, and an arc-based mouth—is drawn in the center of a 960×500 viewport using D3 v5 selections and the `arc` generator. The face is statically rendered with fixed pixel positions and colors, while the eyebrows animate upward and back down over four seconds via chained `transition().duration(2000)` calls, demonstrating D3's built-in animation for SVG attribute interpolation.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

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

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple cartoon face as an SVG, comprising a yellow circle head, two eyes, rectangular eyebrows, and an arc-based mouth. The face is centered within a 960×500 viewport using an SVG group transform. The eyebrows animate upward and back down over two seconds each way using chained `transition().duration()` calls. The mouth is generated with D3’s `arc()` geometry, while static shapes are created via `select`, `append`, and attribute setters.

DD2552
93% match
Loading thumbnail…

Let's make a face with D3

A yellow SVG face with black-outlined features is drawn using D3 v5. The head is a circle centered in a 960 by 500 viewport, with eyes and animated eyebrows that move up and down via chained transitions. A mouth is rendered using the `d3.arc` shape generator with specified inner and outer radii. The code imports `select` and `arc` from D3, appends elements to an SVG group, and uses `transition().duration()` to create the eyebrow motion.

NNikki-gea
93% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan
93% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan
93% match