Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
PPatrickHennessey
Last edited Oct 31, 2019
Created on Oct 30, 2019

This example creates a yellow smiley face from SVG primitives, then animates its eyebrows with a chained transition. Using D3.js v5, it selects the SVG, appends a centered group, and draws the face with circles, rectangles, and an arc-generated mouth. The `transition().duration()` calls move the eyebrow group upward and back, while `d3.arc` builds the mouth path from radius and angle parameters.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/-RQWC4I2I1s?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger
97% 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
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that move up and down using D3.js transitions. The example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth to a group, with the eyebrow movement created through chained `transition().duration()` calls that alter the group’s transform.

Ffiona187412
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that move up and down using D3.js transitions. The example demonstrates fundamental DOM manipulation by appending circles, rectangles, and an arc-based mouth to a group, with the eyebrow movement created through chained `transition().duration()` calls that alter the group’s transform.

Ffiona187412
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a yellow smiley face from SVG primitives, including circles for the eyes and an arc path for the mouth. The most notable behavior is an animated eyebrow movement, achieved by chaining `transition().duration(2000)` calls to shift the eyebrow group’s `transform` attribute up and back down. The code demonstrates fundamental DOM manipulation via `select` and `append`, and uses the `arc` generator to define the mouth’s path.

Kkestefon
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes, including a circle head, two eyes, and an arc-based mouth, all centered via a transformed group. D3.js v5 selections append and style these elements, while a chained `transition` with `duration` settings animates the entire eyebrow group upward and then back down, making the expression shift. The example highlights basic DOM manipulation and transition timing with `select` and `arc`.

MMartin Lord
96% 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
96% 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
96% match