Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Nov 4, 2019

Created on Nov 4, 2019

A smiling yellow face built from SVG shapes animates its eyebrows in a looping expression. The code draws a circle for the head, two circles for eyes, rectangles for brows, and an arc-generated path for the mouth. D3.js v5 selections and transitions move the eyebrows up and down, while the `arc()` generator creates the curved smile.

AI-generated description

Cars report

MIT Licensed

Similar vizzes

Loading thumbnail…

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

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with D3.js animates its eyebrows in a looping up-and-down motion. The example demonstrates fundamental SVG construction using D3 selections and shape generators, building the face from a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows transition vertically via chained `transition().duration()` calls, while `d3.arc` computes the mouth path. The code uses `select` and `arc` from D3 v5, with all elements positioned through SVG attributes.

VVerdidk

96% match

Loading thumbnail…

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

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is built entirely with D3.js v5 selections and SVG elements. The code uses `d3.select` to target an SVG container, `d3.arc` to draw the mouth as a path, and chained `transition.attr` calls to repeatedly move the eyebrows up and down over 2-second intervals. Circles and rectangles form the eyes and brows, with positions calculated relative to the SVG center.

Mmartvdmarel

96% match

Loading thumbnail…

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

96% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example constructs a yellow smiley face with animated eyebrows using SVG. The face is composed of a circle for the head, two circular eyes, and a mouth drawn with the `d3.arc` helper. Eyebrows are rendered as rectangles and animated with chained `transition().duration()` calls, moving them up and down repeatedly. The code uses D3 selections and attribute manipulation to build the SVG scene from scratch, with no external data—only hardcoded geometric values for positioning and sizing.

AArthur Ayestas Hilgert

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built from SVG shapes, with its eyebrows smoothly sliding upward and then back down in a repeating animation. The code uses D3.js v5 selections to append a circle for the face, separate circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that update the group’s `transform` attribute.

Lliuleirain

95% match

Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow smiley face is drawn in SVG with D3.js, featuring two eyes, animated eyebrows, and an arc-shaped mouth. The eyebrows transition upward and back down over four seconds using chained `transition().duration()` calls. The code builds the face by appending circles for the head and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` helper for the mouth, all grouped and translated to center the composition.

EEric Torres

95% match