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

100%

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

✓ Published0🌍 Public

Last edited Jun 19, 2022

Created on Jun 19, 2022

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

A red smiley face with animated eyebrows demonstrates fundamental DOM manipulation and transitions with D3.js v5. The SVG face is centered using a translated group, with circles for eyes and a path drawn via the `d3.arc` helper for the mouth. Eyebrow rectangles transition vertically in a repeating two-second cycle using chained `transition().duration()` calls. The code shows direct attribute setting and selection methods on SVG elements, with a static yellow face on a black background.

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 yellow smiley face with animated eyebrows is rendered in SVG using D3.js v5. The code uses `d3.select` and `d3.append` to build circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc` for the mouth. Eyebrow movement is achieved through chained `transition().duration()` calls that shift the group’s transform. The example demonstrates fundamental DOM manipulation and transition sequencing with D3.

Ssugunagar

97% match

Loading thumbnail…

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

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation and animation with D3.js. The code selects an SVG element and builds the face using circles for eyes, rectangles for eyebrows, and a d3.arc path for the mouth. A chained transition on the eyebrows group animates its vertical position over two seconds, then returns it, creating a repetitive raising and lowering effect. The example relies on D3 v5 selections, attributes, and transitions in a straightforward SVG scene.

SSanjib Paudel

97% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and SVG rendering with D3.js. The face is constructed from SVG circles for the eyes and face, a path created with the `d3.arc` function for the mouth, and rectangles for the eyebrows. Animated eyebrow movement is achieved using `transition()` and `attr` chaining over two 2000-millisecond intervals. The example uses D3 v5 and shows how to select and manipulate SVG elements with data-driven methods.

NNiharika Reddy Amanaganti

97% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The SVG face is built using circles for the eyes and an arc path for the mouth, centered via a group transform. Using `d3.transition` with a 2000-millisecond duration, the eyebrows—rendered as rectangles—move up and down in a looping sequence, showcasing sequential transition chaining in D3 v5. The code imports `select` and `arc` from the D3 module to construct and animate the static face.

Mmanishcheruku

97% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation in D3.js v5. The face is built using SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. Eyebrows move up and down repeatedly via chained `transition()` calls with 2000-millisecond durations. The code imports `select` and `arc` directly from the d3 module, and centers all elements using SVG group transforms.

SSANEEM MOHAMMAD

97% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and transitions in D3.js v5. The SVG face is built from circles, rectangles, and an arc-generated mouth, centered by translating a group element. D3’s `transition().duration()` shifts the eyebrow group upward and back down in a two-second loop. The code imports `select` and `arc` from the D3 module, using method chaining to append and style each shape.

Hhossaphul

96% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation in D3.js v5. The code uses `d3.select` to append SVG circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` helper for the mouth. The eyebrows animate via chained `transition().duration()` calls, moving them up and down over two seconds. The face is centered using an SVG transform translation, and the static body scales to a 1000x500 viewport.

NNavaneeth-Ragi

96% match

Loading thumbnail…

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

A D3.js smiley face animates by moving its eyebrows up and down in a looping transition. The face is built entirely with SVG primitives—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—positioned within a centered group. Using `d3.select`, `d3.arc`, and chained `transition().duration()` calls, the code shifts the eyebrow group’s vertical translation between two offsets. A black background and yellow face with black strokes create clear visual contrast. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

SSANEEM MOHAMMAD

96% match