Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
WWesley Yuen
Last edited Jan 16, 2020
Created on Jan 16, 2020

A yellow smiley face with animated eyebrows demonstrates D3.js DOM manipulation and SVG rendering. The code uses `d3.select` and `d3.append` to construct circles, rectangles, and a mouth path via `d3.arc`. Chained `transition().duration()` calls repeatedly shift the eyebrow group’s `transform` attribute, creating a bouncing motion. All elements are centered within a fixed 960×500 SVG viewport.

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 in SVG, and its eyebrows animate upward and downward in a looping motion. The face is built entirely through D3.js v5 selections, appending circles for the eyes and a path created with the `arc` generator for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the eyebrow group’s vertical translation. The code imports `select` and `arc` from D3 and positions all elements relative to the SVG’s center.

WWesley Yuen
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that rise and fall. The face is built through basic DOM manipulation with D3.js, appending circles, rectangles, and an arc-shaped mouth to an SVG group. A chained `transition` with a 2000-millisecond duration moves the eyebrow group up and down. The example demonstrates core D3 v5 selections and transitions for simple, focused visual animations.

WWesley Yuen
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered with SVG takes center stage, its eyebrows raising and lowering in a looping two-second transition. The example introduces fundamental DOM manipulation with D3.js v5, using `d3.select`, `d3.append`, and `d3.arc` to construct the face from circles, rectangles, and a path. The code explicitly sets SVG attributes like `r`, `cx`, and `transform`, and animates the eyebrow group via chained `transition().duration(2000)` calls. No external data source is used; the face is purely generated from hardcoded dimensions.

WWesley Clark
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with two circular eyes, a mouth shaped by a D3 arc path, and rectangular eyebrows that animate by moving upward and back down. The code uses D3.js v5’s `select`, `arc`, and `transition` APIs to construct and manipulate the SVG elements, applying transforms to position face features and trigger the eyebrow movement over timed transitions.

WWesley Yuen
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation with D3.js v5. The code uses `d3.select`, `d3.append`, and `d3.arc` to build SVG elements, while chained `transition().duration(2000)` calls move the eyebrow group up and down. The mouth is drawn as an arc path, and circles and rectangles form the eyes and brows. Static SVG attributes define the geometry, with the entire face centered via a translated group.

Kkwanwoo100
96% 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
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!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The SVG elements—circles for the eyes, rectangles for the eyebrows, and an arc-generated mouth—are positioned using translation transforms. The code imports `select` and `arc` from D3 v5 and uses chained `transition().duration()` calls to move the eyebrow group upward and back, creating a repeating eyebrow-lift animation. The face is centered within a 960×500 SVG viewport.

LLucian-jw
96% match