Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
MMelina
Last edited Jun 11, 2020
Created on Jun 11, 2020

A D3.js animation draws a yellow smiley face with eyes, a mouth, and eyebrows that move. The SVG is centered, and the code uses D3's `select` and `append` to build shapes, `arc` for the mouth path, and `transition().duration(2000)` twice to animate the eyebrow group up and down in a repeating sequence. The face is static except for the eyebrows, which shift vertically.

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!

D3.js constructs an animated smiley face by manipulating SVG shapes. A yellow circle forms the head, with two static eyes and a mouth drawn using the `arc` path generator. The eyebrows, rendered as rectangles, animate upward and downward over two seconds using chained `transition().duration()` calls on the SVG group, demonstrating fundamental DOM selection and attribute mutation. The code uses the `select` API to target the root SVG element.

EEL MAHI Moncef
96% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation draws a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth. The code builds the face using SVG primitives like `circle`, `rect`, and `path`, selected and appended via `d3.select`. An animated eyebrow movement uses chained `transition().attr()` calls over two two-second intervals, shifting the eyebrow group vertically. The `d3.arc` generator defines the mouth’s curved path, and the layout centers the face within a 960×500 SVG using an offset group and width/height attributes.

Ssourcebox-bug
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 yellow smiley face is drawn in SVG, with its eyebrows animated to move up and down in a continuous loop. The example demonstrates basic DOM manipulation with D3.js, using `d3.select` and `d3.append` to build the face from circles, rectangles, and a path, then applying `transition().duration()` to animate the eyebrow movement. The mouth is created using the `d3.arc` shape generator, and the entire scene is centered within an SVG canvas of fixed dimensions.

FfacundoEMartin
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, featuring eyes, eyebrows, and a mouth rendered as SVG shapes. The code uses D3 selections to append a circle for the face, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. A chained `transition` with a 2-second duration animates the eyebrow group’s vertical position upward and then back, creating a moving-brow effect. The face is centered within a 960×500 SVG, and the animation runs once on page load.

Aarg04
95% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js example draws a yellow smiley face with animated eyebrows that raise and lower in a continuous loop. The face is constructed using SVG primitives: circles for the head, eyes, and an arc-shaped mouth, while rectangles form the eyebrows. The animation relies on D3's `transition().duration()` method to interpolate the eyebrow group's transform attribute between two vertical positions. The code demonstrates straightforward DOM manipulation via `d3.select` and `d3.append`, with all elements positioned absolutely within a 960 by 500 pixel SVG canvas.

Mmarissaverdonck
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG with animated eyebrows that move up and down. D3.js creates the face using circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all positioned within a central group. The animation uses chained transitions on the eyebrows group, alternating between two vertical offsets over two-second intervals. The code imports `select` and `arc` from d3 and uses an SVG container sized 960 by 500 pixels.

AAngelii
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG elements, with two eyes, eyebrows, and a mouth created via D3.js shape generators. The eyebrows animate upward and back down in a repeating loop using chained `transition` calls with a 2000-millisecond duration. Built with D3 v5, the code uses `select`, `arc`, and attribute setters like `attr` to construct the face from circles and a path.

Mmmustafau
95% match