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

100%

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

✓ Published0🌍 Public

Last edited Feb 20, 2022

Created on Feb 19, 2022

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

This example uses D3.js to construct a smiley face out of basic SVG shapes, then animates it. The code builds a blue circle for the head, eyes, and a mouth using `d3.arc`, while two rectangular eyebrows are moved up and down via chained `transition.attr` calls with a 2000ms duration. The animation runs in a loop, demonstrating select-and-append DOM manipulation and declarative transitions 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 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 basic SVG shapes. The face consists of a blue circle, two eyes, rectangular eyebrows, and a curved mouth created using the `d3.arc` function. Animated eyebrow movements are achieved through chained `transition().duration().attr()` calls on SVG groups, while the mouth rotates 180 degrees using a similar transition. The code uses the `d3.select` API to access the SVG canvas and relies on version 5.9.2 of the library.

Nneffer77

96% match

Loading thumbnail…

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

A smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The SVG face, centered on a blue circle, includes eyes and an arc-based mouth. D3 transitions move the eyebrow group upward and back over two seconds. The code uses `select`, `arc`, and chained `transition().duration()` calls from d3.v5 to animate SVG attributes.

Sshiiva-surya

95% match

Loading thumbnail…

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

This example uses D3.js v5 to construct a smiley face from basic SVG shapes and animates its eyebrows. The face comprises a green circle, two eyes, a mouth drawn with an arc, and two rectangular eyebrows. D3’s `transition` API moves the eyebrows up and down in a two-second loop. The code builds the SVG scene by directly appending elements like `circle`, `rect`, and `path` to a centered group, using `d3.select` to target the SVG and `d3.arc` for the mouth’s path data.

Ssugunagar

95% match

Loading thumbnail…

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

This example builds a smiling face with D3.js, using SVG primitives like circles and rectangles to depict the head, eyes, and eyebrows. The code animates the eyebrows by chaining `transition().duration(2000)` calls to move them up and down. The mouth is drawn with a D3 `arc` shape, and all elements are grouped and transformed to be centered within the SVG.

DDanyalMazhar

95% match

Loading thumbnail…

Fork of 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, including circles for eyes, rectangular eyebrows, and an arc-based mouth and nose. The eyebrows animate upward and downward using chained `transition()` and `.attr()` calls, creating a subtle moving expression. The code uses D3 v5’s `select` and `arc` utilities, with the entire face centered on an SVG canvas and rendered in pink and yellow. The animation runs once on page load, with no data source or user interaction.

PPrathyusha Jampala

95% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face composed of a sky-blue head, eyes, nostrils, a curved nose, and a mouth. An animated sequence moves the eyebrows up and down over two seconds using chained `transition` calls on a group element. The visualization relies on D3 v5 selection and `arc` APIs to build the SVG shapes and animate properties.

Nnsatyaprakash22

95% match

Loading thumbnail…

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

This animated SVG smiley face demonstrates fundamental DOM manipulation with D3.js. The visualization uses D3's selection and append methods to construct geometric shapes—a pink circle head, two black eyes, rectangular eyebrows, and an arc-based mouth—all centered within an SVG canvas. The eyebrows perform a continuous up-and-down motion through chained `transition().duration(2000)` calls that alternate between two vertical positions. The code relies on D3 v5 utilities including `select`, `arc`, and the transition API to create the looping animation effect.

PPrathyusha Jampala

95% match

Loading thumbnail…

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

This animated smiley face demonstrates how D3.js can manipulate SVG elements over time. The visualization builds a face from basic shapes, including a sky-blue circle, eyes, eyebrows, and a mouth, with the eyebrows animating up and down using the `transition` API. The code relies on D3 v5's `select`, `append`, and `arc` methods to construct and position the geometry within an SVG canvas. The example specifically highlights declarative DOM manipulation and chained transitions to create a simple, looping facial expression.

TTejaswicmandava

95% match