Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Aug 29, 2018

Created on Aug 29, 2018

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

A self-contained D3.js animation builds a smiley face from SVG primitives—a yellow circle head, two eyes, rectangular eyebrows, and an arc-based smile. The face is centered using a coordinate transform, and the eyebrows bounce up and down in an infinite loop via chained `transition().duration()` calls. The example demonstrates fundamental DOM manipulation with the `select` and `append` API, along with the `arc` symbol for path generation, all rendered in a 960×500 SVG viewport.

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 D3.js animation builds a yellow smiley face with a black outline, two eyes, and a mouth, then animates its eyebrows upward and downward using chained `transition` calls. The SVG is constructed by selecting the root element, setting a viewBox of 960 by 500, and translating a group to the center. The code uses D3’s `select`, `arc`, and `transition` APIs to draw circles, rectangles, and a path, with the mouth as an arc.

MMukund Khandelwal

97% match

Loading thumbnail…

Let's make a face with D3.js!

This example illustrates fundamental DOM manipulation with D3.js by building a smiley face from SVG primitives. A yellow circle forms the head, with two eye circles, a mouth path created using the `arc` generator, and rectangular eyebrows. The animation uses chained `transition()` calls to animate the eyebrow group's `transform` attribute upward and then back down over two seconds each, creating a simple moving expression. The code relies on `svg.append`, `.attr`, and D3's selection and transition APIs, rendering entirely through SVG without external data.

Mmariamy

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

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate upward and downward in a looping motion. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending groups for positioning, and constructing circles, rectangles, and an arc-based mouth using `d3.select`, `d3.arc`, and chained `transition().duration()` calls. The face is centered via a translated group, with all coordinates calculated relative to the viewport dimensions.

Ggcappadaniel

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face built from basic SVG shapes—a yellow circle, two eyes, and a mouth—demonstrates D3.js DOM manipulation. The code uses `d3.select` and `d3.append` to construct elements, while `d3.arc` defines the mouth path. A continuous `transition` animates the eyebrows upward and downward over two-second intervals, showing chained movement. The example relies on D3 v5, rendering in SVG, with dimensions taken directly from the `<svg>` attributes.

AAravind Subramaniam

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face with D3.js, demonstrating fundamental DOM manipulation and animated transitions. Using SVG elements, it constructs a yellow circle head, two eyes, rectangular eyebrows, and an arc-shaped mouth via the `arc()` generator. The code selects the SVG and appends groups to position features, then uses `transition().duration()` to animate the eyebrows upward and back down over four seconds. The example showcases D3 v5’s data-join-free approach, relying on direct selection, attribute setting, and chained transitions to create a simple, expressive character animation.

KKurt J Nilsen

96% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face demonstrates fundamental DOM manipulation and animation. The code builds an SVG face from primitive shapes—a yellow circle for the head, eyes, a mouth via `d3.arc`, and rectangular eyebrows—centered using a translation. It then animates the brows upward and back over two seconds using chained `.transition().duration(2000)` calls, showing how to select elements, append shapes, and apply sequential transitions. The example uses D3 v5 and renders entirely in the browser as an animated SVG.

Mminimartzz

96% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example builds a yellow smiley face with eyes, eyebrows, and an arc-based mouth, then animates the eyebrows upward and back down using chained `transition` calls on SVG `rect` elements. The face is centered via a `g` transform, with `d3.arc` generating the mouth path. The code selects an SVG, appends shapes with explicit pixel offsets, and relies on D3 v5’s `select`, `attr`, and `transition` APIs to demonstrate fundamental DOM manipulation and animation.

Ssathishkottravel

96% match