Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Vvaynexie
Last edited Dec 26, 2019
Created on Dec 26, 2019

A D3.js code example builds a yellow smiley face from SVG primitives, including a circular head, eyes, eyebrows, and a mouth created with the `d3.arc` path generator. The face is centered via a translated group, and the eyebrows are rectangles that move up and down using chained `transition()` calls with a two-second duration each. The demo relies on D3 v5's selection methods (`select`, `append`, `attr`) to construct the shape and animate its parts directly in the browser.

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

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 version 5 to construct a yellow smiley face with eyes, eyebrows, and a mouth directly in an SVG. It demonstrates fundamental DOM manipulation by selecting elements, appending shapes, and applying attributes. The code uses `d3.select` and `d3.arc` to generate the mouth path, while a two-stage `transition()` chain animates the eyebrows upward and then back to their original position over 4 seconds.

Eevesshaw
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 in SVG using D3.js v5, with select and append methods placing circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The face is centered via a group transform, while transition calls animate the eyebrows upward and the mouth downward over two-second intervals, demonstrating basic DOM manipulation and chained transitions without any external data.

Mmirna981
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face in SVG using D3.js v5, with select and append methods placing circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The face is centered via a group transform, while transition calls animate the eyebrows upward and the mouth downward over two-second intervals, demonstrating basic DOM manipulation and chained transitions without any external data.

Mmirna981
96% match