Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
KKhalid
Last edited Sep 22, 2019
Created on Sep 22, 2019

A smiling face made of SVG shapes demonstrates fundamental D3.js DOM manipulation. The code selects an SVG element and appends yellow circles for the head and eyes, black rectangles for eyebrows, and an arc-based path for the mouth. Using `d3.transition` with a two-second duration, the eyebrows animate upward and then back down, creating an expressive movement. The example uses D3 v5's `select`, `append`, and `attr` methods to build and update elements, with the mouth drawn via `d3.arc`.

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!

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 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 D3.js v5 example demonstrates fundamental DOM manipulation by building a smiling face from SVG primitives, including yellow circles for the head and eyes, and rectangular eyebrows that animate upward and downward. The code constructs the face using `d3.select`, `svg.append`, and shape methods like `.attr`, while `d3.arc` generates the mouth as a path with specified inner and outer radii. A chained `transition().duration(2000)` sequence repeatedly moves the eyebrows up and down, creating a simple looping animation.

IIsabel
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn entirely with SVG shapes—a yellow circle for the head, two dark circles for eyes, a dark arc for the mouth, and two animated eyebrow rectangles. The example demonstrates basic D3.js shape generation and animation, using `d3.arc` to create the mouth path and chained `transition` calls to move the eyebrows up and down over repeated two-second cycles. It also shows how to position groups with `translate` transforms and select elements with D3's selection API.

KKaleb LaBarrie
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

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

Let's make a face with D3.js!

A yellow smiley face, rendered with SVG shapes, demonstrates fundamental DOM manipulation and animated transitions in D3.js. The example builds the face using appended `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` generator. Both eyebrows, created as rectangles, move up and down through chained `transition()` calls on their containing group, each lasting two seconds and alternating between two vertical offsets. The code uses D3 v5 selection methods and `attr` to position elements, with no external data source, purely illustrating programmatic shape creation and animation.

JJordan Chiu
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