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 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.

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

Let's make a face with D3.js!

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.

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 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 with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Ddtdenver
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes has animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation, building the face with `select`, `append`, circles, rectangles, and a mouth path generated using the `arc` helper. Eyebrow motion is created through chained `transition().duration()` calls on a group element, while the face is centered using an SVG `transform`. The code uses D3 v5 modules and relies on static shape attributes rather than data binding.

MMMoronto
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates fundamental D3.js DOM manipulation and SVG rendering. The face is built using D3 selections to append circles, rectangles, and an arc-generated mouth path onto an SVG canvas. Eyebrow animation is achieved through chained `transition().duration()` calls that shift the eyebrow group's transform attribute up and down over two-second intervals. The code imports `select` and `arc` from the D3 v5 library, with fixed pixel values controlling facial feature positions and dimensions.

Ggonghewan
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 face is built using D3 selections to append a circle for the head, circles for the eyes, and an arc-generated path for the mouth. Two rectangles form the eyebrows, with the right eyebrow moving upward via a `transition` over two seconds. The code imports `select` and `arc` from the D3 v5 library and reads dimensions from the SVG attributes.

Iiascchwen
96% match