Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Mmirna981
Last edited Oct 10, 2019
Created on Oct 10, 2019

This example builds a smiling face in SVG using D3.js v5, showing fundamental DOM manipulation with selections and SVG shape elements. It draws a yellow circle for the head, two eyes, eyebrows as rectangles, and a mouth created with `d3.arc()`. The animation uses `transition().duration()` to move the eyebrow group up and down repeatedly, demonstrating chained transitions over a two-second interval. The page is set up with a simple HTML structure and imports D3 via a CDN, with all elements positioned relative to the SVG center.

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 v5 to build a smiling face from basic SVG shapes, including a yellow circle for the head, black circles for the eyes, rectangles for the eyebrows, and an arc for the mouth. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups, and positioning shapes with the `attr` method. Eyebrows animate by using chained `transition().duration(2000)` calls to move their group vertically, first upward and then back to the original position. The example highlights D3’s `select` and `arc` APIs for creating and transforming visual elements.

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

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation and animation with D3.js by constructing a smiling face from SVG shapes. The code draws a yellow circular head, two eyes, and a mouth using an arc, then animates the eyebrows by moving a group element up and down. It uses `d3.select` to target the SVG, appends shape elements, and chains `transition().duration(2000)` calls to create the looping eyebrow movement. The rendering approach is SVG output, with all logic contained in a single JavaScript file.

Ggstriker050
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG demonstrates basic D3.js DOM manipulation and animation. Drawn with a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, the face animates by moving the eyebrows upward and back down using chained `transition().duration()` calls. The example uses D3 v5’s `select`, `arc`, and `attr` methods to construct and style elements, with the eyebrow displacement triggered automatically on load.

RRoyCsuka
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
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 D3.js DOM manipulation by building a smiling face out of SVG shapes, with animated eyebrows that move up and down. A yellow circle forms the head, two circles serve as eyes, rectangles become eyebrows, and a path generated with the `d3.arc` helper creates the mouth. Using a `transition().duration(2000)` chain, the eyebrow group toggles its vertical translation, shifting it downward then returning it to the original position. The code explicitly binds SVG elements via `select` and `append`, relying on D3 v5’s modular imports for `select` and `arc`.

Rrjohnson5016
96% match