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 Oct 3, 2022

Created on Oct 3, 2022

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

A smiling face rendered with SVG circles, rectangles, and an arc path animates its eyebrows up and down in a looping transition. The D3.js v5 code uses `select`, `arc`, and chained `transition().duration()` calls to manipulate DOM attributes directly, shifting the eyebrow group's transform between two vertical positions. A red circular head with green stroke and two black eyes remain static while the eyebrows move, demonstrating fundamental D3 DOM selection and attribute updates without data binding.

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 D3.js smiley face demonstrates basic DOM manipulation with animated eyebrows. Built with d3.v5, the example uses D3 selections to append SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth—into a centered group. A two-stage `transition()` chain moves the eyebrow group up and back down over four seconds, illustrating D3's animation timing. The code imports `select` and `arc` from the 'd3' package, with dimensions read directly from the SVG attributes.

SSayan Chatterjee

95% match

Loading thumbnail…

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

A smiling face built with D3.js shows animated eyebrows that move down and back up in a looping transition. The SVG elements—circles for the eyes, rectangles for the eyebrows, and a path created with `d3.arc` for the mouth—are positioned relative to a central group. Using `d3.select` to manage DOM nodes, the code applies chained `transition().duration()` calls to animate the eyebrow group’s transform attribute. No external data is used; the visualization demonstrates fundamental D3 DOM manipulation and SVG rendering.

Kkirangithub23

95% match

Loading thumbnail…

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

A smiley face rendered with SVG animates its eyebrows upward and downward in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG element, appending groups, circles, rectangles, and a path for the mouth using `d3.select` and `d3.arc()`. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group’s `transform` attribute. The code uses D3 v6, with dimensions defined by the SVG’s width and height attributes.

Kkosakase

95% match

Loading thumbnail…

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

A smiling face made of SVG shapes animates its eyebrows up and down. The example demonstrates DOM manipulation with D3.js v5, using `d3.select` to target the SVG element and appending circles, rectangles, and a path for the mouth. Eyebrow movement is achieved with chained `transition().duration(2000)` calls that alternate the `transform` attribute, while the mouth uses the `d3.arc` generator to define its curved shape. The face is centered via a `g` element with a translated transform.

Rradhadevarapu

95% match

Loading thumbnail…

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

A smiling face rendered in SVG features animated eyebrows that rise and fall in a repeating two-second cycle, while the rest of the facial elements remain static. Built with D3 v5, the example uses fundamental selections and DOM manipulation to construct circles, rectangles, and an arc-generated mouth. The code leverages d3.select, d3.arc, and chained transition calls to move the eyebrow group vertically, demonstrating core drawing and animation techniques in a minimal, self-contained visualization.

Bbuzquirk

95% match

Loading thumbnail…

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

This visualization demonstrates basic D3.js DOM manipulation by rendering a smiling face with animated eyebrows that move up and down. The face includes a skyblue circular head, eyes, nose, and an arc-based mouth, all drawn as SVG elements. The code uses D3 v5 selections, `transition()` with a 2000-millisecond duration to animate the eyebrow group, and the `arc()` generator to create the mouth path.

Nnsatyaprakash22

95% match

Loading thumbnail…

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

A smiling face rendered as an SVG drawing with D3.js v5 animates its eyebrows in a continuous loop. The visualization demonstrates fundamental DOM manipulation by using D3 selectors to append circles, rectangles, and a path, with the mouth constructed via the d3.arc arc generator. Eyebrow movement relies on chained transition().duration() calls that translate the eyebrow group up and down over two-second intervals.

Eelayamaransekar

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 rendering a smiley face whose eyebrows animate upward and downward. The SVG face is constructed from circles, rectangles, and an arc path, using D3 selections to append elements and set attributes. Eyebrow movement is achieved through chained `transition` calls with a 2000-millisecond duration, translating the eyebrow group along the Y-axis. The code leverages D3 v5 modules like `select` and `arc`, with inline SVG coordinates defining the face’s layout.

Rradhadevarapu

95% match