Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Cchezydan
Last edited Oct 11, 2020
Created on Oct 11, 2020

This D3.js example demonstrates fundamental DOM manipulation by building an animated smiley face out of SVG shapes. The face, rendered with yellow circles for the head and eyes, and a path for the mouth, is constructed using `d3.select` and `svg.append`. The animation uses chained `transition().duration(2000)` calls to move the rectangular eyebrows up and down. The code uses D3 v5 and associates the SVG with a teal background via `.style`.

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 demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face from basic SVG shapes. A yellow circle forms the head, with separate groups for eyes, eyebrows, and a rectangular nose. Using `d3.select` and `append`, the code builds each element, then animates the eyebrows and nose vertically with `transition().duration(2000)`. The mouth is drawn using the `arc()` generator from the `d3-shape` module. The result is a playful illustration of D3’s data-join-free approach to direct SVG element creation and chained transitions.

VVadim Jouk
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple animated smiley face using D3.js. A yellow circle with eyes and a mouth is constructed through fundamental DOM manipulation, using `svg.append` and `.attr` to create shapes. The face's eyebrows animate by chaining `.transition().duration()` calls to move them up and down repeatedly on the SVG canvas. The code explicitly uses D3's `select` and `arc` APIs to select the SVG element and draw the mouth path.

Vveagy
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 demonstrates fundamental DOM manipulation with D3.js v5 by constructing a smiley face out of basic SVG shapes. The code uses `d3.select`, `d3.append`, and chained `.attr()` calls to create a yellow circle, two eye circles, a mouth path drawn with `d3.arc()`, and a rectangular eyebrow that animates vertically via a pair of `transition().duration()` calls, moving down and back up repeatedly. No external data is used; the visualization relies purely on hardcoded geometry and SVG rendering.

Aaidanoconnor1
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face from SVG shapes. A yellow circle forms the head, with eyes, eyebrows, and a mouth added as separate elements. The code uses d3.select and append to construct the face, then applies chained transitions to move the eyebrows up and down repeatedly. The mouth is drawn using d3.arc with specified inner and outer radii and angles. All shapes are positioned relative to a centered group, with animation running for two seconds per eyebrow movement cycle.

Wwhyamn
96% match
Loading thumbnail…

Let's make a face with D3.js!

This D3.js v5 example demonstrates fundamental DOM manipulation by building a smiling face from SVG primitives, including yellow circles for the head and eyes, and rectangular eyebrows that animate upward and downward. The code constructs the face using `d3.select`, `svg.append`, and shape methods like `.attr`, while `d3.arc` generates the mouth as a path with specified inner and outer radii. A chained `transition().duration(2000)` sequence repeatedly moves the eyebrows up and down, creating a simple looping animation.

IIsabel
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered with SVG demonstrates D3.js DOM manipulation. The code uses `d3.select` to build circles for eyes and a face, a `d3.arc` path for the mouth, and `transition().attr()` to animate rectangular eyebrows moving up and down over two seconds. The example highlights chained transitions and attribute updates on a fixed SVG canvas.

Wwindwardpassage
96% 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
95% match