Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Feb 26, 2019

Created on Feb 26, 2019

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

This example shows how to build a smiley face with D3.js v5, using SVG shapes and animation to make the eyebrows move. A yellow circle forms the face, with two smaller circles for eyes and a path drawn with the `arc` helper for the mouth. The code uses `select` and `append` to create elements, and `transition().attr` to animate the eyebrows upward and back down over two seconds each way. The face is centered by translating a group element, with all dimensions derived from the SVG’s width and height attributes.

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!

This example uses D3.js v5 to build a smiley face from basic SVG shapes. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate by translating up and down in a loop using chained `transition()` calls with 2-second durations. The code demonstrates fundamental DOM manipulation via D3 selections, `append()`, and `attr()`, while the `arc()` generator from D3’s shape module creates the mouth path. All elements are centered using a translated SVG `<g>` group.

AAlain Jennotte

97% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, where the eyebrows animate upward and then back down in a looping motion. The face is centered using a translated `<g>` group, with circles for the eyes and a D3 arc path for the mouth. It demonstrates fundamental DOM manipulation with D3 v5, using `select`, `attr`, and chained `transition().duration()` calls to move the eyebrow group. The animation runs continuously, shifting the eyebrows vertically by 50 pixels before returning to their original position.

PPiotrekW2

97% match

Loading thumbnail…

Let's make a face with D3.js!

D3.js builds a smiley face from SVG shapes: a yellow circle, two eyes, rectangular eyebrows, and an arc-shaped mouth. The code uses `d3.select` and `d3.arc` to construct the face, then applies a chained `transition().duration(2000)` to repeatedly move the eyebrow group up and down, creating an animated expression. All elements are centered via a translation transform.

PPiotrekW2

97% 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!

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

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn in SVG, with eyebrows that animate upward and then return to their original position. The face is constructed through fundamental D3.js DOM manipulation, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` generator, while eyebrow movement relies on chained `transition().duration()` calls that modify a `transform` attribute. All shapes are centered within an SVG element sized 960 by 500 pixels.

DDan Mihaila

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with eyes, eyebrows, and a mouth using SVG elements created through D3.js version 5. The face is centered in a 960×500 viewport, with the mouth drawn via the `d3.arc` shape generator. A two-second `transition` animates the eyebrows upward and then back to their original position, demonstrating sequential attribute changes on a group element. The code uses basic selections like `select` and `append` to construct the face from circles, rectangles, and a path.

Ssourcebox-bug

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous

96% match