Skip to main content
SimilarExport ZIP
100%

Let's make a face with D#.js

✓ Published0🌍 Public
Jjsong
Last edited Jan 8, 2020
Created on Jan 7, 2020

A yellow face with black eyes, eyebrows, and a mouth is drawn in SVG using D3 v5. The code builds the face from basic shapes—circles, rectangles, and a path generated with the `arc` API—centered within a 960×500 viewport. The right eyebrow animates with chained `transition` calls that move it down and back up. Static elements are created first, followed by the animated eyebrow.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D#.js

A yellow circle face with black-outlined features animates its right eyebrow in a quick bouncing motion. The face is built entirely with D3.js v5 selections and SVG shapes, including circles for eyes and an arc-generated path for the mouth. The code uses D3's `arc` generator for the mouth, `transition` with `duration` for the eyebrow animation, and positions elements via template-literal transform attributes. The left eyebrow remains static, highlighting the asymmetry of the moving right eyebrow.

IIgor Oliveira
95% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circular face with black-outlined eyes and animated eyebrows is rendered in SVG using D3.js. The face is built from D3 selections and shape generators, including `d3.arc` for the mouth path. Eyebrows transition vertically using `transition.attr` with a 2000-millisecond duration, creating a repeated raising motion. The example demonstrates basic D3 data binding, SVG shape construction, and animation chaining on a static, hardcoded dataset.

Sssdark
94% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black eyes and expressive eyebrows is drawn using D3.js v5 in an SVG. The code uses `select` to access the pre-defined SVG element, `arc` to generate the mouth path, and chained `transition().duration()` calls to animate the right eyebrow bouncing upward and downward. The face is centered using a translated `g` group, with hardcoded numeric values for spacing, radii, and offsets defining all facial features.

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

Let's make a face with D3js

A yellow circle face with two eyes and animated eyebrows is drawn using D3.js v7. The code uses `select` to target the SVG element, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows vertically. The construction translates groups via `.attr('transform', ...)` to position facial features relative to the center.

Ppml31780
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined features is rendered in SVG, and its eyebrows animate upward and back down over four seconds. Built with D3 v5, the example uses `d3.select` to target the SVG, `d3.arc` to generate the mouth path, and chained `transition().duration()` calls to move the eyebrow group. The face is centered via a translated `g` element, with eye spacing, radius, and eyebrow dimensions defined as constants. No external data is loaded; all shapes are constructed programmatically from hard-coded values.

Ppcbt1125
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black-outlined features animates its eyebrows in a repeating up-and-down motion. Built with D3 v5, the example composes circles, rectangles, and an arc-generated path for the mouth on a centered group. D3 transitions with specified durations and movement offsets drive the eyebrow animation, while static attributes define eye spacing, radius, and facial proportions.

Eemanuelemurgolo
94% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes and eyebrows is drawn using D3.js v5, with the facial features positioned via SVG transforms. The code builds the face programmatically using `d3.select` and `d3.arc` for the mouth, then animates the eyebrows with chained `transition.attr` calls over two seconds each, moving them downward and back upward. The rendering uses SVG elements inside a centered `<g>` group, with dimensions taken directly from the SVG attributes. The example demonstrates basic SVG construction and animation sequencing without external data.

JJasonXQH
94% match