Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
RrennyshihNY
Last edited Aug 29, 2021
Created on Aug 29, 2021

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.

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 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
100% match
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 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.

RRunxin Shao
97% match
Loading thumbnail…

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

A yellow smiley face rendered with SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The face’s eyebrows animate upward and downward through chained `transition()` calls that shift their `transform` attribute over two-second intervals. The author constructs the head, eyes, and eyebrows with `select()` and `append()`, while the mouth uses the `arc()` generator from D3’s shape module with specified inner and outer radii and angular ranges. Both circles and rectangles are positioned via fixed pixel offsets in a centered group.

RrennyshihNY
97% match
Loading thumbnail…

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

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

Ssd2beatles
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 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 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
96% match