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

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
98% 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
96% 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 using D3 selections, with a circular head, two eyes, eyebrows, and a mouth created from an arc path. The face demonstrates D3 transitions by animating the eyebrow group upward and then back down over repeated 2-second intervals. The code uses `d3.select` and `d3.arc` from D3 v5, with SVG elements appended and styled via attributes for positioning and fill.

Kkwanwoo100
96% 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
96% 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
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 is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no
96% match