Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Aaidanoconnor1
Last edited Nov 24, 2019
Created on Nov 24, 2019

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.

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 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
97% match
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
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiley face using D3.js v5, showing fundamental DOM manipulation with SVG shapes like circles, rectangles, and paths. The face's eyebrows animate by moving vertically and returning, using D3's `transition().duration()` to tween the `transform` attribute over two seconds. A yellow rectangle serves as the face, while the arc-based mouth uses D3's `arc()` generator for its path. The code directly selects and appends SVG elements, demonstrating basic D3 selection and attribute setting.

NNikkor
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
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing a smiley face from SVG shapes, with a gentle animation of its eyebrows. The code builds a yellow circle head, eyes, and a mouth using D3’s `select`, `attr`, and an `arc` generator for the path. The eyebrow rectangles transition vertically via chained `transition().duration(2000)` calls, moving them down and back up. It uses D3 v5, rendering to a static SVG canvas with no external data, focusing purely on programmatic element creation and animation.

Nnshedd
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face from SVG shapes, including eyes, eyebrows, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and `transition.attr` to animate the eyebrows moving up and down over a two-second cycle. Rendered in an SVG canvas, it highlights how D3 v5 binds data and updates attributes directly, with all elements positioned relative to a centered group.

Aabreudude
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 demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face from SVG shapes, then animating its eyebrows and mouth. The code uses d3-selection to append and configure circles, rectangles, and an arc-based path for the face components. A chained `transition().duration(2000)` moves the eyebrow group vertically and shifts the mouth, creating a subtle facial expression change. The visualization runs entirely in the browser using D3 v5 and renders via SVG, with all geometry defined through static attributes rather than data binding.

Mmirna981
96% match