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 Feb 26, 2021

Created on Feb 26, 2021

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The code uses d3.select, d3.arc, and chained transitions to move rectangular eyebrows up and down over time. The face is built from SVG circles for the eyes and head, and a path created with the arc generator for the mouth. All elements are positioned relative to a centered group using transform attributes.

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 basic D3.js DOM manipulation. The face is drawn entirely with SVG primitives—a circle for the head, smaller circles for the eyes, rectangles for the eyebrows, and a path generated by `d3.arc` for the mouth. Using `d3.transition` with a two-second duration, the eyebrow group repeatedly shifts vertically, creating a bobbing motion. The code leverages D3 selections and attribute setting to build the static facial features, then applies chained transitions to animate the eyebrows independently of the rest of the face.

Aaanawaz

98% 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. The face is built using SVG circles for the eyes and mouth, with the mouth created via the d3.arc() path generator. Eyebrow rectangles transition vertically over two seconds using the .transition() method, then return to their original position. The code explicitly imports select and arc from the D3 v5 library, manipulates SVG attributes directly, and renders entirely in the browser without external data.

AAudioSutta

97% match

Loading thumbnail…

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

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation in D3. The code uses d3.select and append to build SVG circles for the face and eyes, rectangles for eyebrows, and a d3.arc-generated path for the mouth. An eyebrow group animates via chained transition and duration calls, shifting its translate transform up and down over two seconds. The example uses D3 v5 with a declarative selection-based approach, rendering entirely in SVG.

Nnamkhang0807@gmail.com

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

97% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered as an SVG. The face is built from D3.js selections, including circles for the eyes and an arc path for the mouth. Both eyebrows, drawn as rectangles, move upward and then return to their original position using chained `transition().duration()` calls. The example demonstrates fundamental DOM manipulation with d3.select and d3.arc.

Sswapan-datahawklab

97% match

Loading thumbnail…

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

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation and animation with D3.js. The code selects an SVG element and builds the face using circles for eyes, rectangles for eyebrows, and a d3.arc path for the mouth. A chained transition on the eyebrows group animates its vertical position over two seconds, then returns it, creating a repetitive raising and lowering effect. The example relies on D3 v5 selections, attributes, and transitions in a straightforward SVG scene.

SSanjib Paudel

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