Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Oct 21, 2019

Created on Oct 21, 2019

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

A yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth is rendered as SVG elements. The eyebrows animate upward and back down using chained `transition` calls. D3 v5’s `select`, `attr`, and `append` methods construct the face, while the path for the mouth uses the `arc` generator with specified inner and outer radii and start and end angles.

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!

JJuan David Contreras

100% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates fundamental D3.js DOM manipulation. The face uses D3 v5's `select` and `arc` to append a circle, eyes, and a mouth, with the mouth created via the `arc()` generator. Eyebrows, drawn as rectangles, animate upward and downward through chained `transition().duration()` calls, while the mouth also shifts position over two seconds. All elements are positioned within a centered `<g>` group, showing basic SVG construction and data-driven updates.

AAniket

97% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js as an SVG, featuring circular eyes, rectangular eyebrows, and a mouth created using the D3 arc generator. The eyebrows animate upward and back down over four seconds via chained `transition().duration()` calls on the group containing them. The code imports `select` and `arc` from d3, uses an SVG canvas, and positions facial features relative to the viewport center.

Jjnpatel

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

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG circles and a path, with D3's `arc` generator creating the mouth. The face's eyebrows, rectangular SVG elements, animate upward and back down over two seconds using chained `transition` calls with `attr` updates. The example demonstrates fundamental D3.js v5 DOM manipulation, including `select`, `append`, and `attr`, to build and transform SVG elements within a fixed 960×500 viewport.

MMd Hugo Lidero

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas, with two eyes, eyebrows, and a mouth created from circles, rectangles, and an arc path. The eyebrows animate upward and back down over repeated two-second transitions, demonstrating D3's `transition` and `attr` methods for DOM manipulation and animation. The example uses D3 v5's `select`, `arc`, and chained transitions to build and move SVG elements dynamically.

Sstestedletbd

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

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

Aagongwpi

96% match