Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published15🌍 Public

Last edited May 11, 2021

Created on May 11, 2021

This example draws a yellow cartoon face in SVG, centered within a 960x500 viewport, using D3’s `select` and `arc` functions. The face features black circular eyes, rectangular eyebrows, and a mouth generated from an arc path. An animation demonstrates D3's `transition` method, which moves the eyebrows upward and back down over two two-second intervals. All shapes are built with D3 selections, and the SVG elements are positioned via translation and attribute assignments.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to build a cartoon face using D3.js v6, composed of basic SVG shapes: a yellow circle for the head, two small circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The page centers the face within an SVG, and a transition animates the right eyebrow moving upward over two seconds. The code imports `select` and `arc` from the D3 library, uses `svg.append` to construct elements, and applies a transition with a 2000-millisecond duration. No external data is involved; it is purely a programmatic SVG rendering exercise.

++/+

95% match

Loading thumbnail…

Let's make a face with D3.js

This example shows a simple cartoon face built with D3.js, featuring yellow circular head, black-outlined eyes, animated eyebrows, and a mouth created using the `d3.arc()` shape generator. The SVG elements are positioned using translations and attribute bindings, with the eyebrows transitioning through repeated `transition.attr` calls over two-second intervals. Code imports `select` and `arc` from D3 v7 via UNPKG, and demonstrates local ES6 module usage through an exported `message` constant. The face components are drawn entirely in SVG within a 960×500 viewport, with no external data source.

Yyejichun@naver.com

95% match

Loading thumbnail…

Let's make a face with D3.js

A yellow face built from SVG shapes is rendered centered in a 960x500 viewport. D3 selections create circles for the eyes and an arc-generated path for the mouth, while rectangular eyebrows animate vertically via chained `transition().duration()` calls on a group element. The code imports `select` and `arc` from d3 v5, using SVG attributes like `cx`, `r`, and `transform` to compose the figure.

Ssakhabutdinov

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth forms a cartoon face in an SVG canvas. The eyebrows move up and down repeatedly via chained `transition().duration()` calls. Built with D3 v5, the example uses `select`, `append`, and `arc()` to construct the face, positioning elements with SVG transforms and hard-coded dimensions.

Jjesramyep1263

95% match

Loading thumbnail…

Let's make a face with D3.js

A face built from basic SVG shapes—a yellow circle for the head, circles for eyes, and an arc-generated path for the mouth—is centered on a 960×500 canvas. The code uses D3.js v5’s `select` and `arc` APIs to append and position elements, with `transition()` animating the eyebrows up and down over two-second intervals. The rendering is entirely SVG, with all coordinates computed relative to the svg’s center using its width and height attributes.

BBen Daniel

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, black circles for eyes, and an arc-based path for the mouth. The animation shows the eyebrows moving up and down repeatedly through chained `transition()` calls, each lasting 2000 milliseconds. The code uses D3's `select` and `arc` APIs, with coordinates centered via an SVG group transformation. The face is built programmatically in JavaScript, positioning shapes relative to the center of a 960 by 500 viewport.

Mmuxiaofan

95% match

Loading thumbnail…

Let's make face with D3

This example draws a simple cartoon face using D3.js v6, rendered as SVG elements with a short animation. It shows a yellow circle as the head, two black circles for eyes, and an arc-based mouth that transitions from a filled semicircle to a hollow crescent shape over two seconds. The code uses D3 selections, the `arc` generator for the mouth path, and a chained `transition().duration()` to animate the shape change. The face is centered within a 960×500 SVG canvas, with hardcoded positions for facial features.

JJasonXu1244

95% match