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 19, 2022

Created on Feb 19, 2022

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

A yellow smiley face is drawn with two eyes and a curved mouth, and its eyebrows animate by moving upward and then back down in a loop. The example demonstrates fundamental D3.js v5 DOM manipulation using SVG elements like `circle`, `rect`, and `path`. The code uses `select` and `arc` from D3, and the animation is driven by chained `transition().duration(2000)` calls that alter the `transform` attribute on the eyebrow group.

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!

This example shows a yellow smiley face with eyes and eyebrows that animate in a continuous up-and-down motion. The face is drawn entirely with SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path built with the `d3.arc` generator for the mouth. D3.js v5 is used for DOM selection and manipulation, while chained `transition().duration()` calls alternately raise and lower the eyebrow group. The code imports `select` and `arc` directly from the `d3` module, and positions elements relative to the SVG’s computed width and height.

Nnofferdahl

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

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes. A yellow circle, two eyes, a mouth drawn using the `d3.arc` function, and rectangular eyebrows are all appended to an SVG container. The eyebrows animate by moving up and down through a chained `transition` with `attr` changes, using a two-second duration for each movement. The code uses D3 v5’s `select` and `arc` methods, with the animation running once on load.

Llerik03

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

97% match

Loading thumbnail…

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

A yellow smiley face with moving eyebrows demonstrates basic SVG manipulation and animation with D3.js. The face is drawn using D3 selection methods to append circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow movement is created using chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports specific functions like `select` and `arc` from the D3 v5 library and renders entirely as SVG within a fixed-size viewport.

Ddmpiq

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!

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows. The code uses D3 v5 selections to append SVG circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered via a transformed group. The eyebrows transition vertically over two 2-second intervals using chained `transition().duration()` calls, moving up and then back down. The visualization showcases how D3 can create and animate geometric shapes through declarative SVG attribute setting.

AApril Fangzhu Guo

97% match

Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas as a circle with eyes, eyebrows, and a mouth, built by manipulating DOM elements with D3.js v5. The code uses `select`, `append`, and `attr` to construct the shapes, and `transition` to animate the eyebrow group moving down and back up over a 4-second loop. The mouth is a path generated with the `arc` function, creating a curved shape from specified angles.

Hhunianhang

96% match