Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published1🌍 Public
GGeolffrey S Mena
Last edited Aug 4, 2019
Created on Aug 4, 2019

A cheerful SVG face is drawn using D3.js v5, with a yellow circle for the head, eyes, eyebrows, and a mouth created via the d3.arc path generator. The eyebrows animate upward and downward using chained transition calls with a two-second duration each, shifting their group’s transform attribute. All shapes are appended to a centered g element, with positions set through absolute pixel offsets for facial features.

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 rendered in SVG displays yellow circular head, eyes, eyebrows, and a mouth. D3 v5 code builds the face using `d3.select`, `d3.arc` for the mouth path, and appended `circle` and `rect` elements. Eyebrows animate with `transition.duration()`, moving them downward and back over two seconds each way, while the head and features remain static against a dark blue background.

GGeolffrey S Mena
96% match
Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face with black-outlined features is drawn in an SVG canvas, centered by a D3.js transform. The face includes a circle head, two eyes, rectangular eyebrows, and a semicircular mouth created with `d3.arc`. The eyebrows animate vertically using chained D3 transitions, moving up and down over two seconds each way. The example demonstrates basic SVG drawing and animation with D3 v5, using direct DOM selection and attribute manipulation.

BBenjamin Ogorek
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn using D3.js v5. The SVG elements are centered via a translation transform, and the mouth is created with the `d3.arc` generator. The eyebrows animate up and down using chained `transition().duration()` calls, moving their group container's transform over two seconds each way. The code selects the SVG, sets dimensions from its attributes, and appends all shapes.

GGeolffrey S Mena
96% match
Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face built with SVG primitives uses D3.js v6 to assemble circles, rectangles, and an arc-based mouth from the `d3.arc` API. The face is centered via an SVG group translation, with eyes and eyebrows positioned using explicit offsets. A `transition().duration(2000)` sequence animates the eyebrow group by shifting its `transform` attribute upward and back, creating a subtle blinking or raising motion. The rendering is entirely SVG-based, with static geometry defined in the initial state.

Xxsg13
96% match
Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face, built from SVG primitives, blinks its rectangular eyebrows up and down repeatedly. The example uses D3.js v5 selections and transitions to animate the facial features. A circle forms the head, two circles serve as eyes, and an arc path, generated with the `d3.arc()` helper, creates the mouth. The code constructs the face by appending SVG elements to a group and animates the eyebrows with chained `transition().duration()` calls.

Lluckytrue
96% match
Loading thumbnail…

Let's make a face with a d3.js

A smiling face composed of SVG shapes is drawn with d3.js, featuring a yellow circular head, eyes, eyebrows, and a curved mouth. The eyebrows animate upward and back down using `transition.attr` on a `<g>` element. The code builds the face with d3 selections, `arc()` for the mouth path, and explicitly positioned ellipses and circles for the eyes, all rendered in an SVG canvas.

Mmyoung1032
96% match
Loading thumbnail…

Let's make a face with D3,js

A cheerful, cartoon-style face is drawn in a yellow circle with black outlines. The face includes two eyes, animated eyebrows that shift up and down, a nose, and a smile, all positioned using calculated offsets. Built with D3.js v5, the SVG elements are created and manipulated programmatically. The code uses d3.select to access the SVG, d3.arc to generate the nose and mouth paths, and d3.transition to animate the eyebrows' vertical position over a series of timed movements.

FFuertes503
95% match
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
95% match