Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js!

✓ Published0🌍 Public
Jjakenachlas
Last edited Jan 27, 2021
Created on Jan 27, 2021

This fork of the "Let's make a face" tutorial builds a yellow smiley face with animated eyebrows using D3.js v5. The example demonstrates fundamental SVG DOM manipulation and transitions. A group element centers the face, while circles form the eyes and a path, created with the d3.arc generator, draws the mouth. D3 transitions, chained over two seconds each, move the eyebrows up and down repeatedly, showing how to animate SVG attributes without explicit JavaScript timers.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows. The code uses D3 v5 selections to append SVG circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered via a transformed group. The eyebrows transition vertically over two 2-second intervals using chained `transition().duration()` calls, moving up and then back down. The visualization showcases how D3 can create and animate geometric shapes through declarative SVG attribute setting.

AApril Fangzhu Guo
96% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3 v5. Using SVG shapes, the code draws a circle for the face, two circles for eyes, and rectangles for eyebrows, while an arc generator creates the mouth. The eyebrows move vertically through chained `transition().duration()` calls, and the entire face is centered using an SVG `g` transform. This example focuses on core D3 selections and transitions.

LLG0498
96% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The face is drawn using SVG circles for the eyes, rectangles for the eyebrows, and a d3.arc() path for the mouth, all centered within an SVG canvas. The eyebrows move up and down repeatedly through chained transition().duration() calls that change their transform attribute. The example uses d3.select and d3.arc from the d3 v5 library to construct and animate the static SVG elements.

JJorrr2
96% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example uses D3.js v5 to build a yellow smiley face with animated eyebrows. It starts by appending SVG elements—circles for the face and eyes, rectangles for eyebrows, and a path for the mouth—transformed to center the drawing. The eyebrows repeat a two-second transition sequence that moves them upward and back down via `transition.attr()`. The code imports `select` and `arc` from D3 to construct the mouth shape, relying on static coordinates and no external data.

Jjit-bose-10
96% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows and a shifting mouth is drawn as SVG elements using D3.js v5. The code builds the face by appending circles, rectangles, and an arc path to a group, then applies chained `transition` calls with a 2000-millisecond duration to move the eyebrows upward and alter the mouth’s end angle. It uses D3’s `select`, `arc`, and attribute manipulation to demonstrate fundamental DOM updates and transitions without any data source.

YYuqi Tang
96% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with blinking eyebrows is rendered as an SVG using D3.js v5. The face is centered via a group transform, with circles for eyes, rectangles for brows, and a path built with the `arc` generator for the mouth. Two chained `transition` calls on the eyebrow group animate its vertical position, moving the brows up and down over two-second intervals. This demonstrates fundamental DOM manipulation and chained transitions in D3.

VVis Ivaturi
96% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js and animates its eyebrows upward in a repeating two-second cycle. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition` calls to move the eyebrow group’s `transform` attribute. Circles form the eyes and a yellow circle with a black stroke forms the head, all rendered in SVG. The animation demonstrates basic DOM manipulation and timed transitions with D3 v5.

CChromosin13
96% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example creates an animated smiley face using D3.js v5. The visualization renders a yellow circle head with eyes, eyebrows, and a mouth as SVG elements. The eyebrows animate by moving up and down over two seconds using D3's transition system. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending shapes with attributes like position and fill color. It also uses D3's arc function to generate a path for the mouth.

JJyothicherukuri
96% match