Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Ssathesujit
Last edited Aug 7, 2020
Created on Aug 7, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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
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 smiling face made from yellow SVG shapes reacts as its eyebrows repeatedly raise and lower. D3.js v5 positions circles for the eyes, rectangles for the brows, and an arc-generated path for the mouth within a grouped coordinate system. Chained `transition().duration()` calls animate the eyebrow group’s transform attribute, cycling its vertical offset to create the expression. No external data is loaded; all geometry is defined through hardcoded constants and D3’s `arc` helper.

CConnor Bailey
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 yellow smiley face rendered in SVG has animated eyebrows that rise and fall. The face is built through basic DOM manipulation with D3.js, appending circles, rectangles, and an arc-shaped mouth to an SVG group. A chained `transition` with a 2000-millisecond duration moves the eyebrow group up and down. The example demonstrates core D3 v5 selections and transitions for simple, focused visual animations.

WWesley Yuen
95% match
Loading thumbnail…

Let us make a face with D3.js

A face built from basic SVG shapes animates into a smile in this D3.js v5 example. Yellow circle head, black eyes, and rectangular eyebrows are drawn via `d3.select` and SVG attributes, then the smile uses the `d3.arc` generator. Transitions on the mouth and one eyebrow change their shape over two seconds, creating a cheerful expression. The other eyebrow remains static, showing asymmetric animation.

Ppadmanabhan-rajendrakumar
95% match
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
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