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

100%

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

✓ Published0🌍 Public

Last edited May 21, 2023

Created on May 21, 2023

Forked from Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles and an arc path, and its eyebrows animate by moving up and down. The example demonstrates basic D3.js DOM manipulation and transitions, using `d3.select`, `d3.arc`, and chained `transition().duration()` calls to shift the eyebrow group's transform attribute. The face is centered with a translated `g` element, and all shapes are positioned using hardcoded pixel offsets. Rendering uses SVG within an HTML page, with animation running continuously in two-second cycles.

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!

A yellow smiley face rendered as an SVG reacts to a repeating transition, with both eyebrows moving up and down in sync. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG element, appending groups, and drawing shapes like circles, rectangles, and an arc for the mouth. It uses `d3.select` and `d3.arc`, with `transition().duration()` to animate the eyebrow positions over 600-millisecond intervals. The face is centered using SVG transform attributes, and the code runs with d3.v5.

Iiidalindh

97% match

Loading thumbnail…

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

A yellow smiley face appears centered in an SVG canvas, built entirely with D3.js v5 shape and selection APIs. The code uses `d3.arc` to draw the mouth, while circles form the eyes and rectangles create the eyebrows. Two chained `transition()` calls animate the eyebrow group upward and then back to its original position over four seconds, demonstrating basic DOM manipulation and animation through D3’s data join and transition system.

Yyuan20001224

97% 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

97% match

Loading thumbnail…

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

A yellow smiley face drawn with SVG circles and an arc path uses D3.js transitions to animate its eyebrows upward and back over two seconds each way. The face is centered within a 960×500 SVG, with eyes, eyebrows, and mouth positioned via transforms. This example demonstrates fundamental DOM manipulation with d3.select, attribute setting, and chained transition().duration() calls on SVG elements.

RrennyshihNY

97% match

Loading thumbnail…

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

RrennyshihNY

97% 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 built using SVG circles for the head and eyes, rectangles for the brows, and a `d3.arc` path for the mouth. The eyebrows move up and down repeatedly via chained `transition().duration()` calls that update the group's `transform` attribute. The example uses D3 v5 with selection methods like `append` and `attr` to construct and style elements within a 960×500 SVG canvas.

LLuoTianqi

97% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The face is built from SVG circles, rectangles, and an arc-generated mouth path, centered within a fixed 960×500 viewport. Using D3 v5, the eyebrows transition vertically via chained `transition().duration()` calls, moving down 50 pixels and back over four seconds. The code imports `select` and `arc` from the D3 library, constructs the face with SVG shapes, and applies no external data—relying entirely on hardcoded geometric constants for positioning.

DDeclan Naughton

97% 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 and transitions. The face is built by appending SVG circles for the eyes and face, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. Using `.transition().duration(2000)`, the eyebrow group shifts vertically down and back up, creating a repeated motion. The code explicitly imports `select` and `arc` from the D3 v5 library.

44charan4

97% match