Fork of Fork of Let's make a face with D3.js!

100%

Fork of Fork of Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Feb 20, 2023

Created on Feb 20, 2023

Forked from Fork of Let's make a face with D3.js!

A smiling face rendered in SVG is centered and built entirely with D3.js shape primitives. The static face consists of yellow circles for the head and eyes, black strokes, and a donut-shaped mouth path created with the `arc` generator. An animation is driven by chained `transition().duration(2000)` calls, which move the two rectangular eyebrows up and down in a repeating cycle. All elements are appended to a group translated to the SVG center, using explicit pixel coordinates for positioning.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, with a yellow circle for the head, two eyes, and a mouth formed using the d3.arc path generator. The animated eyebrows, rendered as rectangles, repeatedly transition upward and back down over two-second intervals using D3's transition method. The example demonstrates fundamental DOM selection and manipulation through d3.select, attribute setting, and chained transitions, operating entirely within a 960×500 SVG canvas.

Ddheeraj1509

95% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face is rendered in SVG using D3.js, with circular eyes and an arc-based mouth. A group containing rectangular eyebrows animates vertically via chained `transition()` calls, moving up and then back down over two two-second intervals. The code uses D3 selections and the `arc` generator from `d3-shape`, with dimensions driven by the SVG's width and height attributes. This example demonstrates fundamental DOM manipulation and animation with D3 v5.

Ssrinivasaraosankula

94% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face is rendered as a yellow circle with two eyes, animated eyebrows, and an arched mouth, all drawn in SVG. The eyebrows move up and down repeatedly using chained D3 transitions. The code builds the face by appending SVG elements to a group, using D3 v5's `select`, `attr`, and `arc` for the mouth path, with an implicit data-join-free DOM construction.

Ssohum42

94% match

Loading thumbnail…

Fork of Let's make a face with D3.js

A smiling cartoon face is drawn with SVG shapes, including a yellow circle for the head, black circles for eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate upward and back downward over four seconds using chained D3 transitions. The code uses d3-selection to append elements to an SVG canvas and d3-shape’s `arc()` function to generate the mouth path. The face is centered via a group transformation, with eye spacing and offsets defined as constants.

AAdam Usmani

94% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face built with SVG renders a yellow circle, two eyes, and an arc-based mouth. D3.js v5 transitions animate the eyebrows, moving a group containing two rectangles upward and back down over a four-second loop. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to manipulate DOM elements directly, with static attributes for spacing and dimensions defined in JavaScript.

SSaip Can Hasbay

94% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face with yellow circular head, black-outlined eyes, and a curved mouth is rendered as SVG using D3 selections. The code builds the face by appending circles, rectangles, and an arc path to a centered group element. Eyebrows animate upward and back down via chained `transition.attr` calls over two-second intervals. The example uses `d3.select`, `d3.arc`, and SVG attribute manipulation to demonstrate fundamental DOM binding and transitions in D3 v5.

Mmatthewtang89@gmail.com

94% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiley face rendered in SVG with D3 v5 demonstrates fundamental DOM manipulation. The face consists of a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth created using `d3.arc()`. The eyebrows animate upward and back downward over four seconds via chained `transition().duration()` calls, shifting the eyebrow group's `translate` transform. The code uses `d3.select` to append elements, reads the SVG dimensions for centering, and positions features with explicit x/y offsets and eye spacing constants.

Kkaruppuraja

94% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The code selects an SVG element, appends a yellow circle for the face, and adds eyes, eyebrows, and a mouth using D3’s `arc()` generator. Two transitions animate the eyebrow group’s vertical position over two seconds each, moving them up and down. The example relies on D3’s `select` and `transition` methods to build and animate the static SVG structure.

PPiotr Paszek

94% match