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 22, 2023

Created on Feb 22, 2023

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

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

96% match

Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a looping vertical motion, demonstrating fundamental DOM manipulation. The visualization constructs the face using SVG shapes—a circle for the head, circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` for the mouth. Coordinates are centered via a translated `<g>` element, and the eyebrow movement is driven by chained `transition` calls that shift the group’s `transform` attribute over 2-second intervals. The code relies on D3 v5’s `select`, `attr`, and `transition` APIs, with a fixed viewport defined in the HTML.

NNeil Chen

96% match

Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a repeated rise-and-fall motion. The example demonstrates fundamental DOM manipulation by building the face from SVG elements—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` helper for the mouth. Eyebrow movement uses chained `transition().duration()` calls to shift the group’s `transform` attribute, alternating between raised and lowered positions. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG on a 960×500 canvas.

Ppavakpatel

96% match

Loading thumbnail…

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

This visualization demonstrates a smiley face with animated eyebrows, moving up and down in a repeating two-second cycle. The face is built using fundamental D3.js DOM manipulation, appending SVG shapes like circles, rectangles, and a path-based mouth. The eyebrows move via chained `transition()` and `duration()` calls, which shift their vertical position. The code specifically utilizes D3 v5’s `select`, `arc`, and transition methods to create the static face and its simple dynamic expression.

IIsigned

96% match

Loading thumbnail…

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

A smiley face built with D3.js displays animated eyebrows that shift upward and downward in a looping two-second transition. The code selects an SVG element and constructs the face using D3 selections, appending circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `d3.arc` API for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group's transform offset. The example uses D3 v5 with SVG rendering and demonstrates basic DOM manipulation and animation for static, predefined geometry without external data.

Ssrinivasaraosankula

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

96% match

Loading thumbnail…

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

A D3.js smiley face animates by moving its eyebrows up and down on an SVG canvas. The code uses `d3.select` to append SVG elements including circles for the eyes and mouth, and rectangles for the eyebrows. A `transition` with a 2000-millisecond duration moves the eyebrow group vertically, then back, creating a repeating animation. The face is centered using SVG transforms, with dimensions read from the SVG attributes. The mouth is drawn using the `d3.arc` path generator.

Hharika-1929

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