Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Apr 10, 2019

Created on Apr 10, 2019

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

This example draws a smiling face using SVG shapes built with D3.js selections and the `d3.arc` path generator for the mouth. A yellow circle forms the head, with two dark eyes and rectangular eyebrows positioned via coordinate offsets. The eyebrows animate upward and back down over four seconds using chained `transition` calls with `attr` updates on the group’s transform. All elements are centered by translating a parent `<g>` based on the SVG’s dimensions, demonstrating fundamental DOM manipulation and data-driven styling without external data or force simulation.

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 smiling face is drawn entirely with SVG shapes—a yellow circle for the head, two dark circles for eyes, a dark arc for the mouth, and two animated eyebrow rectangles. The example demonstrates basic D3.js shape generation and animation, using `d3.arc` to create the mouth path and chained `transition` calls to move the eyebrows up and down over repeated two-second cycles. It also shows how to position groups with `translate` transforms and select elements with D3's selection API.

KKaleb LaBarrie

96% match

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

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a smiling face out of basic SVG shapes: a yellow circle for the head, two eyes, and a mouth created with the `arc` generator. Eyebrows animate by repeatedly shifting their vertical position via chained `transition().duration(2000)` calls on a group element. The code relies on D3 selections and `select`, with dimensions read from the SVG attributes. The simple, playful design demonstrates how D3 can drive both static shape construction and time-based transformations in an SVG scene.

Cchristoshanes

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

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!

A smiling face is constructed entirely from SVG shapes, with a yellow circular head, two dark eyes, eyebrows, and an arc-based mouth. The example demonstrates basic SVG composition and D3 selections, then animates the eyebrows by chaining `transition` calls to shift their vertical position. It uses D3 v5’s `select`, `arc`, and `attr` APIs to generate the mouth path and manage transform attributes. A centered `<g>` group positions all features, with fixed pixel constants controlling eye spacing and offsets.

Iianleekq

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face with eyes, eyebrows, and a mouth built from SVG shapes using D3.js. The face is centered in an SVG canvas, with a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. D3’s `selection.append`, `attr`, and `transition` APIs animate the eyebrows by shifting their group’s transform down and back over two two-second intervals. The code imports `select` and `arc` from the d3 module and uses chained transitions to create the movement.

Ssourcebox-bug

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