Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Rradhadevarapu
Last edited Feb 18, 2023
Created on Feb 18, 2023

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.

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!

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
97% match
Loading thumbnail…

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 up and down. The face is built using SVG circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. D3 transitions animate the eyebrow group’s `transform` attribute over two sequential two-second intervals. The code selects the SVG element, appends a centered group, and uses D3’s `select` and `arc` imports to construct the static and dynamic elements.

NNiharika-Guthikonda
97% match
Loading thumbnail…

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

This fork animates a D3.js smiley face by moving its eyebrows up and down in a repeating sequence. The code demonstrates fundamental DOM manipulation, building the face with SVG shapes including a blue circle head, two eyes, eyebrow rectangles, and an arc-generated mouth. The animation uses D3’s `transition().duration()` chained calls to shift the eyebrows’ transform attribute between two vertical positions over two-second intervals. The example uses d3-selection and d3-shape APIs, with the SVG appended to a 960×500 canvas and coordinates centered via a translation.

Rradhadevarapu
96% 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
96% 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 animating a smiley face whose eyebrows move up and down. It shows how to build the SVG face from basic shapes—circles for the eyes, rectangles for the eyebrows, and an arc for the mouth—before applying a two-stage transition to the eyebrow group. The code uses d3-selection and d3-shape’s `arc()` to construct the path, with `transition().duration()` chaining to create the animated eyebrow movement. The face is centered using an SVG group with a translated transform.

Pprachow
96% match
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
96% 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 whose eyebrows animate upward and downward. It first builds the face using SVG shapes, including a red circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `arc` generator. The eyebrows then move repeatedly through chained `transition` calls, each lasting two seconds, shifting their vertical position on a continuous loop. The visualization relies on D3 selections and attribute methods to create and position elements within an SVG canvas.

BBaji-2000
96% match
Loading thumbnail…

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

This example demonstrates how D3.js can build playful, animated SVG graphics through fundamental DOM manipulation. It creates a comically explicit smiley face with moving eyebrows using SVG circles, paths, and arc generators. The eyebrows transition vertically using chained `transition()` calls over two-second intervals. The code relies on D3 v5 selections, the `arc()` and `linkVertical()` generators, and attribute manipulation to position and style each element.

Ddhruvs47
96% match