Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Vveagy
Last edited Aug 29, 2018
Created on Aug 29, 2018

A D3.js animation builds a smiley face from SVG shapes, then makes its eyebrows bounce repeatedly as a looped transition. The face is composed of a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth positioned with SVG transforms. The code imports `select` and `arc` from D3 v5 to generate the mouth path and manipulate elements. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down, demonstrating basic DOM selection and animation without data binding.

AI-generated description

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

MIT Licensed

Similar vizzes

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

Let's make a face with D3.js!

This example uses D3.js v5 to construct a smiling face from SVG primitives, with animated eyebrows that move up and down over time. The face consists of a yellow circle, two eyes, eyebrows, and a mouth drawn using an arc path. The animation is handled through chained `transition().duration(2000)` calls that alternately shift the eyebrow group’s `transform` attribute, creating a simple looping motion. The code relies on methods like `select`, `append`, and `attr` for DOM manipulation, along with D3’s `arc` generator for the mouth shape.

Vveagy
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
96% match
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!

This example shows a yellow smiley face built with D3.js that animates its eyebrows in a continuous up-and-down motion. The face is rendered as SVG elements, including circles for the eyes and an arc-generated path for the mouth, all positioned within a central group. Using D3 selections and the `transition().duration()` method, the eyebrows—drawn as rectangles—move in a two-step sequence that repeats once. The code imports `select` and `arc` from the D3 v5 library to create the shapes.

SSimon Fei
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates D3.js v5 DOM manipulation. The code builds the face using SVG shapes, appending a circle for the head, two circles for eyes, rectangular eyebrows, and a path generated with the `arc()` function for the mouth. The eyebrows animate upward and downward over two seconds using chained `transition()` and `attr()` methods. This example highlights fundamental D3 selection, attribute setting, and transition functionality.

AA1L9E9X9
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates fundamental D3.js DOM manipulation and SVG rendering. The face is built using D3 selections to append circles, rectangles, and an arc-generated mouth path onto an SVG canvas. Eyebrow animation is achieved through chained `transition().duration()` calls that shift the eyebrow group's transform attribute up and down over two-second intervals. The code imports `select` and `arc` from the D3 v5 library, with fixed pixel values controlling facial feature positions and dimensions.

Ggonghewan
96% 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
96% match