Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Dec 8, 2018

Created on Dec 8, 2018

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

This example shows a yellow smiley face built with D3.js v5, complete with eyes, eyebrows, and a curved mouth, rendered as SVG elements. The code uses D3 selections and the `arc` generator to construct the face, then animates the eyebrows by chaining `transition().duration()` calls to move them up and down. Each facial feature is positioned using SVG attributes like `cx`, `r`, and `transform`, with the mouth drawn via the `arc()` path helper. The face is centered on a 960×500 canvas using a translated group element.

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 yellow smiley face is drawn on an SVG canvas using D3.js v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.

LLittledevil7

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles, rectangles, and a path, centered on a 960-by-500 canvas. The face’s eyebrows animate upward and back down using chained `transition` calls with 2-second durations. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending grouped elements, and using the `arc` generator to shape the mouth. D3 v5 is loaded via a CDN, with `select` and `arc` imported from the library.

Mmoonstorm86

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 yellow smiley face is drawn on an SVG canvas using D3.js v5, with circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows animate upward and back down over four seconds via chained `transition().duration()` calls. The code uses D3’s `select`, `arc`, and attribute setters to construct the face, with all elements centered using a translated `<g>` group.

MMMoronto

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face appears in an SVG, built entirely through D3.js v5 selections and DOM manipulation. The face includes a head, two eyes, and a mouth drawn with the `d3.arc()` path generator. The eyebrows, rendered as rectangles, animate continuously via chained `transition` calls, moving up and then back over 2-second intervals. The example demonstrates fundamental SVG element creation, coordinate transforms, and data-driven attribute updates using D3's `select`, `append`, and `attr` methods.

Ssdilbaz

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered as SVG is built entirely through D3.js v5 DOM manipulation, with a circular head, two eyes, and a mouth drawn using `d3.arc()`. The example demonstrates layered selections and chained transitions by animating the eyebrows upward and back down over two two-second intervals. The code uses D3's `select`, `append`, and `transition` methods to construct and update elements, while a constant eye spacing offsets left and right features around the face's center. No external data is used; geometry derives from hardcoded pixel dimensions on a 960×500 viewport.

AAngelii

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