Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
WWeiyiDeng
Last edited Feb 23, 2022
Created on Feb 23, 2022

A yellow smiley face drawn with SVG shows subtle animation: both eyes shrink and regrow over two seconds each, while the eyebrows shift upward and back. The code uses D3 v5 selections and transitions, with `select`, `arc`, and `transition.attr` to manipulate SVG circles, rectangles, and a path. The face is centered via a translated `g` element, and all motion loops once without user interaction.

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 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 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
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 drawn with SVG shows a subtle animation as its eyebrows rise and fall in a repeating two-second loop. Built entirely with D3.js v5, the example uses `d3.select` and `d3.append` to construct circles, rectangles, and a mouth path via `d3.arc`, while chained `transition().duration()` calls drive the eyebrow movement. The code reads the SVG's width and height attributes to center the face within a 960×500 canvas, demonstrating fundamental DOM manipulation and data-driven styling without external data.

RRayed12
96% match
Loading thumbnail…

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

A yellow smiley face drawn with SVG shows a subtle animation as its eyebrows rise and fall in a repeating two-second loop. Built entirely with D3.js v5, the example uses `d3.select` and `d3.append` to construct circles, rectangles, and a mouth path via `d3.arc`, while chained `transition().duration()` calls drive the eyebrow movement. The code reads the SVG's width and height attributes to center the face within a 960×500 canvas, demonstrating fundamental DOM manipulation and data-driven styling without external data.

RRayed12
96% match
Loading thumbnail…

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

A yellow smiley face with black outlines is rendered in SVG, featuring two eyes, animated eyebrows, and a mouth. The eyebrows transition vertically between two positions over three seconds. D3 v5 selections, `arc` for the mouth path, and chained `transition` calls manage the animation. The face is centered within a 960×500 SVG canvas using a transform.

JJetlinZ
96% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in an SVG. The face is composed of D3.js shapes: a circle for the head, two circles for the eyes, and an arc for the mouth. The eyes' rect eyebrows repeatedly move up and down using chained D3 `transition` calls with a 2-second duration each. The code uses D3 v5's `select`, `append`, and `attr` functions to build the SVG DOM directly.

CCorey-PT
96% match
Loading thumbnail…

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

A yellow smiley face drawn with SVG shows off basic D3.js DOM manipulation: the code appends circles for eyes and a mouth, uses a path with `d3.arc` for the smile, and animates the eyebrows with repeated `transition.attr` calls that shift their vertical position over two seconds. The face is centered by translating a grouping element, with fixed numeric constants for eye spacing, radius, and eyebrow sizing. The animation loops once, lifting the eyebrows upward then returning them, demonstrating chained transitions on the same selection.

DDimas Sudjito
95% match