Let's make a face with D3.js!

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

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

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

Let's make a face with D3.js!

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn in SVG using D3.js v5. The eyebrows animate upward and back down over two seconds via chained `transition()` calls with `duration(2000)`. The code uses `d3.select`, `d3.arc`, and attribute manipulation to construct the face, with coordinates centered on an SVG canvas.

SShawn Kearney

Let's make a face with D3.js!

This example shows a friendly yellow face built entirely with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. The face is constructed using D3.js v5 selections to append a circle for the head, additional circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The code uses `transition()` with a 2000-millisecond duration to animate the eyebrow group’s `transform` attribute. All elements are centered within an SVG canvas using a translation transform, and the styling is handled by an external stylesheet.

Ddacoylo

Let's make a face with D3.js!

A yellow SVG face with black outlines is drawn using D3.js, featuring circular eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate vertically via chained `transition` calls, moving down and back over two seconds each. Using D3 v7, the code selects the SVG, creates a centered group, and builds shapes with `circle`, `rect`, and the `arc` generator for the mouth. The face's proportions are driven by constants like `eyeSpacing` and `eyeRadius`, with no external data source.

Aash301

Let's make a face with D3.js!

A yellow circle with black strokes serves as a face, featuring two eyes, animated eyebrows that move up and down over two-second transitions, and a mouth drawn as an arc. The example demonstrates D3 v5's selection, transition, and arc generators to construct and animate SVG shapes. Eyebrows transition between vertical offsets using `transition().duration()`, while the mouth uses `d3.arc()` with specified inner and outer radii and angular extents. The SVG canvas is centered via a translation transform, and all elements are positioned relative to that origin.

Xxfqx92

Let's Make a Face with D3.js

A yellow SVG face with a black outline appears, featuring two circular eyes and a smile rendered as an arc path, while its rectangular eyebrows move down and back up in a looping animation. Built with D3 v5, the code uses `select`, `arc`, and chained `transition().duration()` calls on SVG groups to animate the eyebrow transforms, with the face centered via a translated `<g>` element and dimensions read from the SVG attributes.

DDan Henri