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 Sep 21, 2023

Created on Sep 21, 2023

Forked from 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.

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 D3.js DOM manipulation. The code uses d3-selection to append SVG circles, rectangles, and an arc-generated mouth path onto a central group. Two sequential `transition` calls with 2000-millisecond durations move the eyebrows down and back up. D3 v5's `select` and `arc` utilities handle element selection and path geometry, while SVG attributes define the face's static features and the animation loop controls the eyebrow motion.

Eetiosa

98% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation and transitions with D3.js. The face is built using SVG shapes including circles for the eyes, a path created with `d3.arc` for the mouth, and rectangles for the eyebrows. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down repeatedly, while the static face elements remain centered via a translated `<g>` element. The code imports `select` and `arc` from the D3 v5 library and renders entirely in SVG within a 960×500 viewport.

MManideepChakilam

98% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The SVG face is built using circles for the eyes and an arc path for the mouth, centered via a group transform. Using `d3.transition` with a 2000-millisecond duration, the eyebrows—rendered as rectangles—move up and down in a looping sequence, showcasing sequential transition chaining in D3 v5. The code imports `select` and `arc` from the D3 module to construct and animate the static face.

Mmanishcheruku

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

98% 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 constructed with SVG circles, rectangles, and an arc-generated mouth, all positioned relative to the center of the viewport. The eyebrows use chained `transition().duration()` calls to move vertically and back, creating a blinking effect. The code imports `select` and `arc` from D3 v5 and builds the visualization entirely through SVG attributes.

CCharlene Ong

98% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and transitions in D3.js v5. The SVG face is built from circles, rectangles, and an arc-generated mouth, centered by translating a group element. D3’s `transition().duration()` shifts the eyebrow group upward and back down in a two-second loop. The code imports `select` and `arc` from the D3 module, using method chaining to append and style each shape.

Hhossaphul

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