Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published5🌍 Public

Last edited Mar 19, 2020

Created on Mar 17, 2020

A smiling yellow face with animated eyebrows is drawn entirely with SVG shapes, including circles for the head and eyes, rectangles for eyebrows, and an arc-generated mouth. The eyebrows rise and fall repeatedly via chained `transition` calls that animate the `transform` attribute over two seconds each. Built with D3 v5, the example uses `select` to manipulate the SVG, and imports the `arc` generator from the `d3` module to create the mouth path. A button click logs a message to the console.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau

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 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

95% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG demonstrates basic D3.js DOM manipulation and animation. Drawn with a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, the face animates by moving the eyebrows upward and back down using chained `transition().duration()` calls. The example uses D3 v5’s `select`, `arc`, and `attr` methods to construct and style elements, with the eyebrow displacement triggered automatically on load.

RRoyCsuka

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes has animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation, building the face with `select`, `append`, circles, rectangles, and a mouth path generated using the `arc` helper. Eyebrow motion is created through chained `transition().duration()` calls on a group element, while the face is centered using an SVG `transform`. The code uses D3 v5 modules and relies on static shape attributes rather than data binding.

MMMoronto

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

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas, with two eyes, eyebrows, and a mouth created from circles, rectangles, and an arc path. The eyebrows animate upward and back down over repeated two-second transitions, demonstrating D3's `transition` and `attr` methods for DOM manipulation and animation. The example uses D3 v5's `select`, `arc`, and chained transitions to build and move SVG elements dynamically.

Sstestedletbd

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The SVG face is built using D3 selections to append a circle for the head, circles for the eyes, and an arc-generated path for the mouth. Two rectangles form the eyebrows, with the right eyebrow moving upward via a `transition` over two seconds. The code imports `select` and `arc` from the D3 v5 library and reads dimensions from the SVG attributes.

Iiascchwen

95% match