Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published3🌍 Public

Last edited Aug 4, 2020

Created on Aug 4, 2020

A yellow smiley face is drawn inside an SVG canvas using D3.js v5. The face's two eyebrows are rectangles that animate vertically, moving down and then back up over two seconds each way using chained `transition().duration()`. The example uses D3's `select` and `append` functions to build the SVG elements, including a circle for the head, two circles for eyes, a line for the mouth, and the animated eyebrow rectangles. All elements are positioned relative to the center of the canvas, and the animation is triggered directly in the JavaScript code.

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

A yellow smiley face with black outlines is drawn in an SVG canvas, then its eyebrows animate upward and back down in a repeating motion. The example demonstrates basic D3.js v5 DOM manipulation by using `d3.select`, `append`, `attr`, and chained `transition().duration()` calls to move the rectangular eyebrows. The face is constructed from circles for the eyes and an `arc()`-generated path for the mouth, positioned relative to the SVG center. All rendering uses SVG elements with D3 applying attributes directly, and the eyebrows’ movement is the only animated behavior shown.

JJeet Jain

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black outlines is drawn on an SVG canvas, centered in the viewport. Its eyes, eyebrows, and mouth are all composed of basic geometric shapes. Using D3.js v5, the code builds the face by appending circles, paths, and rectangles to SVG groups. An animation sequence uses chained `.transition()` calls to shift the eyebrows up and down, with each movement lasting two seconds. The mouth is created using the `arc()` API, while the overall structure demonstrates fundamental SVG DOM manipulation via D3 selection and attribute methods.

AAndrey Chergik

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas with D3.js, featuring eyes, eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using D3's `transition()` and `attr()` methods. The face is built from basic SVG shapes—circles for the eyes and a path generated with `d3.arc()` for the mouth. All elements are positioned dynamically based on the SVG's width and height attributes.

MMathias Brem

96% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a yellow smiley face centered in an SVG canvas, with eyebrows that repeatedly move upward and then return to their original position. The face is constructed from SVG circles for the eyes, rectangles for the eyebrows, and a path for the mouth generated with the `d3.arc` API. D3’s `transition` method animates the eyebrow group’s `transform` attribute over two-second intervals. The code uses D3 v5’s `select` and `append` functions to manipulate the SVG DOM directly.

Ssapan2997

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring circular eyes, a curved mouth, and rectangular eyebrows that animate upward and back in a looping motion. The example demonstrates fundamental SVG DOM manipulation by selecting an `<svg>` element and appending grouped shapes with `d3.select` and `append`. It uses D3's `arc` generator to create the mouth path and `transition().duration()` to move the eyebrows and mouth, with attributes like `attr` and `translate` transforms controlling position and animation.

Mmirna981

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 with animated eyebrows is drawn inside an SVG using D3.js v5. The code creates the face’s head, eyes, and mouth with `select`, `append`, and `arc` for the smile path. Eyebrows are rectangles whose vertical position animates in a loop via chained `transition().duration()` calls, moving up and down. The example demonstrates fundamental DOM manipulation and data-driven shape generation without external data, relying solely on the D3 library.

Mmin

96% match