Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
SStellaSong1
Last edited Nov 13, 2020
Created on Nov 13, 2020

This is an animated smiley face built with D3.js (v5) that demonstrates fundamental DOM manipulation. The face is constructed from SVG primitives, including a yellow circle for the head, two circles for eyes, and a path created with the `d3.arc` API for the mouth. The example uses D3's `transition().duration(2000)` to animate the eyebrows (rectangles) moving up and down in a two-step sequence. The entire composition is centered within an SVG canvas using an SVG transform.

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 D3.js smiley face demonstrates fundamental DOM manipulation and animation. The code builds an SVG face from primitive shapes—a yellow circle for the head, eyes, a mouth via `d3.arc`, and rectangular eyebrows—centered using a translation. It then animates the brows upward and back over two seconds using chained `.transition().duration(2000)` calls, showing how to select elements, append shapes, and apply sequential transitions. The example uses D3 v5 and renders entirely in the browser as an animated SVG.

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

Let's make a face with D3.js!

This example illustrates fundamental DOM manipulation with D3.js by building a smiley face from SVG primitives. A yellow circle forms the head, with two eye circles, a mouth path created using the `arc` generator, and rectangular eyebrows. The animation uses chained `transition()` calls to animate the eyebrow group's `transform` attribute upward and then back down over two seconds each, creating a simple moving expression. The code relies on `svg.append`, `.attr`, and D3's selection and transition APIs, rendering entirely through SVG without external data.

Mmariamy
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate upward and downward in a looping motion. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending groups for positioning, and constructing circles, rectangles, and an arc-based mouth using `d3.select`, `d3.arc`, and chained `transition().duration()` calls. The face is centered via a translated group, with all coordinates calculated relative to the viewport dimensions.

Ggcappadaniel
96% match
Loading thumbnail…

Let's make a face with D3.js!

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.

Bbbak92
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face from SVG shapes. A yellow circle forms the head, with eyes, eyebrows, and a mouth added as separate elements. The code uses d3.select and append to construct the face, then applies chained transitions to move the eyebrows up and down repeatedly. The mouth is drawn using d3.arc with specified inner and outer radii and angles. All shapes are positioned relative to a centered group, with animation running for two seconds per eyebrow movement cycle.

Wwhyamn
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a simple animated smiley face in SVG. The code builds the face from basic shapes—a yellow circle for the head, two eyes, eyebrows, and an arc-based mouth—and demonstrates D3's DOM manipulation and transition API. The eyebrows animate by moving up and down via chained `transition().duration(2000)` calls on the SVG group containing the rectangles, shifting the group's transform attribute. The visualization uses `d3.select` and `d3.arc` to generate the mouth path, with all elements centered in a 960-by-500 canvas.

Ssathesujit
96% 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 primitives: a yellow circle, two eyes, a mouth drawn with `d3.arc`, and rectangular eyebrows. The face is centered in an SVG canvas via a `g` element and coordinate transforms. The eyebrows animate using chained `transition().duration()` calls, moving up and down over two-second intervals. The code relies on D3 v5 selection, attribute setting, and transition APIs to mutate SVG elements directly.

Jjustprophet
96% match