Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
AArcy Flores
Last edited Oct 17, 2019
Created on Oct 17, 2019

A smiling face rendered in SVG uses D3.js selection methods to append and position circles, rectangles, and an arc-based mouth. The eyes and eyebrows are grouped and translated, with D3 transitions animating the eyebrow group upward and back over two seconds. The animation repeats once, moving the eyebrows through a vertical range to create a surprised expression. D3's `select`, `arc`, and chained `transition` and `attr` methods drive the DOM manipulation, while the page loads D3 v5 from a CDN.

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 drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan
95% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face made of SVG shapes is drawn with D3.js, using circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows animate vertically via chained `transition().duration()` calls, shifting down and back up over two seconds each. The code imports `select` and `arc` from d3, manipulates SVG attributes directly, and positions elements relative to a centered group. Rendering uses an SVG canvas with a yellow circle and black strokes.

AAkshada Pradhan
95% 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
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, and its eyebrows animate upward and downward in a loop. The face is constructed using D3.js v5’s `select` and `append` to create circles for eyes, rectangles for eyebrows, and a `path` for the mouth via the `arc` shape generator. The eyebrows’ movement is driven by chained `transition().duration()` calls that alter the group’s `transform` attribute. The code relies on D3’s DOM manipulation and transition APIs, with all rendering occurring in an SVG viewport.

JJuan Carlos
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as SVG elements animates its eyebrows in a continuous loop. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG canvas, appending a centered group, and building the face from circles, rectangles, and an arc path. Eyebrows transition vertically using chained `transition().duration()` calls, moving down 50 pixels then returning. The code imports `select` and `arc` from D3 v5, constructing the mouth with the arc generator’s inner and outer radii and angle parameters.

MMunTatt Yap
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a circle head, rectangular eyes, and an arc-based mouth. The face’s eyebrows animate vertically in a looping transition, moving up and then returning to their original position over four seconds. The code uses D3 v5 selections and the `arc` helper to generate the mouth path, while `transition().duration()` drives the eyebrow movement. The entire figure is centered within a 960×500 SVG canvas, with styling applied via an external stylesheet.

Vveagy
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a simple smiley face out of SVG shapes, with animated eyebrows that move up and down. It demonstrates fundamental DOM manipulation through method chaining: appending circles and rectangles to construct the face, and using `transition().duration()` to move the eyebrow group. The code imports `select` and `arc` from D3 v5, and draws the mouth with the `arc()` path generator. A yellow circle with a black stroke forms the head, with eyes and eyebrows positioned via SVG transforms.

Ffaaty
94% match