Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Eevesshaw
Last edited Aug 15, 2020
Created on Aug 15, 2020

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.

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

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows. The face is constructed entirely with SVG elements, including circles for the eyes, rectangles for the brows, and a mouth path generated with the `d3.arc` shape generator. The eyebrows perform a continuous up-and-down motion using chained `transition` and `duration` methods. The code imports `select` and `arc` from D3 v5, applies attributes directly to SVG shapes, and uses template literals for transform translations.

AAdrian Lawrence
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face with D3.js, including eyes, a mouth, and animated eyebrows. The code demonstrates basic DOM manipulation by selecting an SVG element and appending shapes like circles, rectangles, and an arc-based mouth path. D3 v5’s `transition()` method moves the eyebrows up and down over repeated two-second intervals. The face is centered using an SVG group with a translated transform, and all geometry is defined by explicit pixel constants.

Vvoiletymr
97% 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 primitives, complete with eyes, eyebrows, and a mouth. The eyebrows animate up and down using chained `transition().duration()` calls, shifting the eyebrow group’s `transform` attribute over two seconds. The code uses `d3.select` and `d3.arc` from the D3 v7 library, setting positions via `attr` and leveraging SVG circles, rectangles, and a path for the arc-based mouth.

黃黃歆善
97% 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
97% 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
97% 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
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
97% match