Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
PPYATA SHARAN
Last edited Feb 23, 2023
Created on Feb 23, 2023

This example shows a smiling face built in SVG whose eyebrows animate up and down. Using D3 v5 and the `d3.arc` and `d3.select` APIs, the code constructs a sky-blue circle for the head, adds eyes, and attaches two rectangles as eyebrows. A path with an arc generator forms the mouth. The eyebrows move via chained `transition.attr` calls over 2-second intervals, demonstrating basic DOM manipulation and selection-based updates without external data.

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!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiling face whose eyebrows animate up and down. It shows how to select an SVG element, append grouped shapes—circles for the face and eyes, rectangles for eyebrows, and a path for the mouth—and position them using translation transforms. D3’s `transition().duration()` chains move the eyebrows vertically over two seconds, while the mouth uses `d3.arc()` to create a curved smile. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG.

Ddhanushkar006
95% match
Loading thumbnail…

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

A smiling face rendered with SVG shapes uses D3.js to animate its eyebrows. The code builds the face from circles, rectangles, and an arc path, then applies chained transitions with `transition.attr` to move the eyebrows up and down. The example demonstrates fundamental DOM manipulation with D3's selection and arc methods, showing how to construct and animate a basic graphic using d3.v5.

PPrathyusha Jampala
95% match
Loading thumbnail…

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

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping motion. The example demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` to append SVG circle, rectangle, and path elements for the face, eyes, eyebrows, and mouth. Animated eyebrows are implemented with chained `transition.attr` calls that alternate the vertical position of a group containing two rectangles. The mouth is generated using the `d3.arc` helper with specified inner and outer radii and angle ranges.

MMadan05101998
95% match
Loading thumbnail…

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

A D3.js animation builds a smiling face from SVG primitives, with eyebrows that repeatedly shift up and down over two-second intervals. The code uses `d3.select` and `d3.append` to construct the face, and the `d3.arc()` API generates the mouth as an annular sector. The eyebrows animate via chained `transition().duration(2000)` calls on an SVG group, demonstrating fundamental DOM manipulation and animated attribute updates within an SVG canvas.

HHarishma Nallala
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 Fork of Let's make a face with D3.js!

This example builds a smiling face with D3.js, using SVG primitives like circles and rectangles to depict the head, eyes, and eyebrows. The code animates the eyebrows by chaining `transition().duration(2000)` calls to move them up and down. The mouth is drawn with a D3 `arc` shape, and all elements are grouped and transformed to be centered within the SVG.

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

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

This example demonstrates a smiling face drawn with D3.js v5, using SVG shapes and a continuous animation to move its eyebrows. The code constructs the face from basic SVG primitives, including circles for the eyes and a path generated by the `d3.arc` API for the mouth. Eyebrow movement is achieved by chaining `transition().duration(2000)` calls, which animate the `transform` attribute of a group element back and forth. The visualization runs on an 960x500 canvas, centering the facial features with hardcoded offsets and using D3's DOM selection and manipulation functions.

DDmytro Tyshchenko
95% match