Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Bbbak92
Last edited Jan 21, 2021
Created on Jan 20, 2021

A yellow smiley face with black eyes and a curved mouth is drawn on an SVG canvas using D3.js. The example demonstrates fundamental DOM manipulation with methods like `select`, `append`, and `attr` to create circles, rectangles, and a path generated with the `arc` function. Animated eyebrows, rendered as rectangles, move up and down via chained `transition` calls with a 2000-millisecond duration, showcasing basic animation in D3 v6.

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

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas, with two eyes, eyebrows, and a mouth created from circles, rectangles, and an arc path. The eyebrows animate upward and back down over repeated two-second transitions, demonstrating D3's `transition` and `attr` methods for DOM manipulation and animation. The example uses D3 v5's `select`, `arc`, and chained transitions to build and move SVG elements dynamically.

Sstestedletbd
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles, rectangles, and a path, centered on a 960-by-500 canvas. The face’s eyebrows animate upward and back down using chained `transition` calls with 2-second durations. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending grouped elements, and using the `arc` generator to shape the mouth. D3 v5 is loaded via a CDN, with `select` and `arc` imported from the library.

Mmoonstorm86
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with a black outline and three eyes is drawn using D3.js. The shape is assembled from SVG circles, rectangles, and arc-generated paths for the nose and mouth. The code uses d3.select, d3.arc, and chained transitions to animate the eyebrows, which move upward and then back down over a two-second duration. The example demonstrates basic DOM manipulation and SVG rendering with D3 v5.

DDimitarDraganov
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.

LLittledevil7
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, using circles for the eyes and an arc-generated path for the mouth. The eyebrows are rectangles that animate upward and back down via chained `transition().duration()` calls. The example demonstrates fundamental DOM manipulation with `d3.select`, `d3.arc`, and SVG attribute binding, with all geometry positioned relative to the viewport center.

Ppxdu
97% match