Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSomu1433
Last edited Feb 24, 2023
Created on Feb 24, 2023

A smiley face built with D3.js animates by raising and lowering its eyebrows. The code selects an SVG canvas and constructs the face from basic shapes, including circles for eyes and a path for the mouth using `d3.arc`. Eyebrow movement is achieved with chained `transition().duration()` calls that shift the rectangle positions over two seconds. The example uses D3 v5, imported via `d3.select` and `d3.arc`.

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 smiley face composed of SVG shapes animates its eyebrows in a looping sequence. The code builds the face using D3 selections, appending circles for the head and eyes, rectangles for brows, and a path from `d3.arc` for the mouth. Eyebrow movement is driven by chained `transition().duration(2000)` calls that shift the group’s `transform` attribute between two positions. The example demonstrates fundamental DOM manipulation and animation with D3 v5.

SSai Kaushik
95% 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
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 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
95% 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 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 Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows, moving them up and down. The example demonstrates basic D3.js DOM manipulation by selecting the SVG element, appending groups, and building the face from circles, rectangles, and an arc path. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` methods to create the two-second eyebrow animation loop, with dimensions defined via attributes on the root SVG.

AAbin
95% 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
95% match