Let's make a face with D3.js

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3

Let's make a face with D3.js!

A smiling face made of yellow SVG shapes animates its eyebrows upward and downward in a loop. Built with D3 v5, the example uses basic selections to append and style a circle, two eye circles, rectangular eyebrows, and an arc-shaped mouth. The `arc` generator creates the mouth path, while chained `transition().duration()` calls animate the eyebrow group’s translate transform over two seconds each way. The SVG is centered via a translated group based on the viewport dimensions.

Bbluesibra

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Ddtdenver

Let's make a face with D3.js!

A yellow smiley face drawn with SVG circles, rectangles, and an arc path animates its eyebrows in a looping transition. D3.js v5 selections append and style the facial elements, while `transition.attr` shifts the right eyebrow’s vertical position over 2-second intervals. The mouth uses the `d3.arc()` generator to create a curved path. Static attributes set the face radius, eye spacing, and eyebrow dimensions.

TTrey Billing

Let's make a face with D3.js

A yellow circle with black outlines forms a smiling face, featuring two black eyes and rectangular eyebrows that animate upward and then return to their original position. The face is constructed with D3.js v5 using SVG elements, including circles for the face and eyes, rectangles for the eyebrows, and a path generated with the d3.arc() API for the mouth. The eyebrows transition via chained transition().duration() calls on a group element, which shifts their vertical offset by 50 pixels over two seconds before resetting.

CClara Hu

Let's make a face with D3.js!

A smiling yellow face rendered in SVG animates its eyebrows up and down. D3.js version 5 builds the face from basic shapes: a circle for the head, two circles for the eyes, rectangles for the brows, and an arc-generated path for the mouth. The eyebrow animation uses chained `transition().duration()` calls to move the group containing the rectangles.

Ssathesujit

Let's make a face with D3.js!

A yellow smiley face built with SVG uses D3.js v5’s selection methods to append a circle for the head, two circles for eyes, and rectangles for eyebrows, with an arc-generated path forming the mouth. The code demonstrates chained transitions via `transition.attr` to animate the eyebrow group’s vertical position over two 2-second phases, creating a raising and lowering effect. The face is centered using a group transform, with all shapes positioned relative to that origin.

BBendrog

Let's make a face with D3.js!

A smiling face built from SVG shapes animates its eyebrows up and down in a looping transition. The example constructs the face from basic geometric elements—a yellow circle for the head, two small circles for eyes, rectangles for brows, and an arc path for the mouth—centered via a translated group. Using D3 v5, the code applies chained `transition()` and `.attr()` calls to move the eyebrow group repeatedly, while the `d3.arc()` helper generates the mouth’s curved outline. The rendering relies on SVG appended directly to the page’s `<svg>` element.

Mmaber77