Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Jjtacne
Last edited Apr 29, 2020
Created on Apr 29, 2020

This example uses D3.js to build a smiling face out of SVG primitives, including a yellow circle, two eyes, and a mouth shaped with the `d3.arc` path generator. The face is centered within an SVG canvas via a `g` element transform, and the eyes and eyebrows are positioned using attribute math. A two-second `transition` animates the eyebrow group's `y` attribute in a loop, causing the eyebrows to move up and down. The code demonstrates fundamental DOM manipulation through D3's selection and chaining methods.

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 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
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiling face from SVG primitives—a yellow circle, two eyes, rectangular eyebrows, and an arc-shaped mouth—centered within an SVG. The code constructs the face using `select` and `append`, then animates the eyebrows upward and back down with chained `transition().duration(2000)` calls. It imports the `arc` helper from D3 v5 to generate the mouth path, and uses static attributes for sizing and positioning. The animation runs once on page load, showing a face whose eyebrows move without user interaction.

Ttianyilt
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiling face out of SVG shapes, then animating its eyebrows. A yellow circle forms the head, with two dark eyes and an arc-based mouth positioned around the center. The code uses `d3.select`, `append`, and attribute setters to construct elements, while `transition().duration()` moves the eyebrow group up and down over two-second intervals. The rendering relies on SVG elements within a 960-by-500 viewport, with all positioning handled through transform attributes and numerical constants.

JJayesh Swami
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!

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 DOM manipulation with D3.js by constructing a smiley face from SVG primitives: a yellow circle, two eyes, a mouth drawn with `d3.arc`, and rectangular eyebrows. The face is centered in an SVG canvas via a `g` element and coordinate transforms. The eyebrows animate using chained `transition().duration()` calls, moving up and down over two-second intervals. The code relies on D3 v5 selection, attribute setting, and transition APIs to mutate SVG elements directly.

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

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiling face. A yellow circle forms the head, with black-outlined eyes, rectangular eyebrows, and an arc-shaped mouth. The animation uses D3’s `transition` method to repeatedly move the entire eyebrow group up and down over two-second intervals, creating a blinking effect. The SVG scene is centered using the `attr` transform, and all shapes are appended to the SVG canvas with hardcoded dimensions and positions.

Ddktaylor916
95% match