Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Vveagy
Last edited Aug 29, 2018
Created on Aug 29, 2018

This example builds a smiling face from basic SVG shapes using D3.js, with animated eyebrows that move up and down in a looping transition. The code selects an SVG element, centers a group, and appends a circle for the head, circles for eyes, rects for eyebrows, and a path for the mouth generated with the `d3.arc()` helper. Using `d3.transition()` and `.duration(2000)`, the eyebrows shift vertically twice, creating a repetitive motion. The demonstration focuses on fundamental DOM manipulation—such as `.append()`, `.attr()`, and chained transitions—while rendering entirely in SVG with no external data.

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 builds a smiling face out of basic SVG shapes, with animated eyebrows that move up and down. Using D3.js v5, the code selects the SVG element, appends and positions circles for the eyes, rectangles for the brows, and an arc-generated path for the mouth. A transition chain on the eyebrows group animates the transform attribute over two two-second intervals, creating a subtle, looping expression change.

EEd Link III
97% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates its eyebrows up and down in a looping transition. The example constructs the face from basic geometric elements—a yellow circle for the head, two small circles for eyes, rectangles for brows, and an arc path for the mouth—centered via a translated group. Using D3 v5, the code applies chained `transition()` and `.attr()` calls to move the eyebrow group repeatedly, while the `d3.arc()` helper generates the mouth’s curved outline. The rendering relies on SVG appended directly to the page’s `<svg>` element.

Mmaber77
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes in D3.js animates its eyebrows upward and back down over two seconds. The example demonstrates fundamental DOM manipulation using D3’s `select` and `append` methods to build circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. A chained `transition` with a two-second duration moves the eyebrow group’s `transform` attribute, showing how to animate SVG elements with D3’s transition system.

Mmarci640
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example constructs a smiley face using SVG primitives in D3.js, then animates its eyebrows in a looping motion. The face is built by appending circles, rectangles, and a path to an SVG group, with the mouth created using the `d3.arc` shape generator. Eyebrows are rectangles that move vertically via chained `transition().duration(2000)` calls to `attr('transform')`, creating a bouncing effect. The code demonstrates basic DOM manipulation and animation with D3’s selection and transition APIs.

Jjesramyep1263
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 shapes, including a circle head, rectangular eyes, and an arc-based mouth. The face’s eyebrows animate vertically in a looping transition, moving up and then returning to their original position over four seconds. The code uses D3 v5 selections and the `arc` helper to generate the mouth path, while `transition().duration()` drives the eyebrow movement. The entire figure is centered within a 960×500 SVG canvas, with styling applied via an external stylesheet.

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

Let's make a face with D3.js!

A smiling face drawn with SVG elements animates as its eyebrows repeatedly move up and down. Built with D3.js v5, the example uses selection methods like `append` and `attr` to construct circles, rectangles, and an arc-based path for the mouth. A chained `transition` with a two-second duration shifts the eyebrow group's transform, creating the looping motion.

Hhsrashmi
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG elements animates as its eyebrows repeatedly move up and down. Built with D3.js v5, the example uses selection methods like `append` and `attr` to construct circles, rectangles, and an arc-based path for the mouth. A chained `transition` with a two-second duration shifts the eyebrow group's transform, creating the looping motion.

Hhsrashmi
96% match