Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ssolution365
Last edited Oct 3, 2023
Created on Oct 3, 2023

This example demonstrates a smiley face whose eyebrows animate upward and downward in a looping motion. Using D3.js v5, the code constructs the face from SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with `d3.arc()` for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group’s vertical transform. All elements are appended to a centered `<g>` within an SVG canvas, with no external data source.

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 a smiley face built with D3.js, whose eyebrows animate in a continuous loop. An SVG circle forms the yellow head, with additional circles for eyes and a path created with the `arc` function for the mouth. The animation is driven by chained `transition()` calls on the eyebrows group, which move the eyebrows down and back up over a two-second interval each way. The code uses d3 v5 and relies on the `select`, `append`, and `attr` methods to manipulate the SVG DOM elements directly.

Ccharkaoui
97% match
Loading thumbnail…

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

This example demonstrates a yellow smiley face drawn from basic SVG shapes, with animated eyebrows that move up and down. The face is constructed using D3.js v5 primitives including `circle`, `rect`, and `path` elements, positioned through SVG `transform` attributes. The eyebrows animate via chained `transition().duration()` calls, which shift the group's vertical translation. The mouth is created using the `d3.arc` generator to produce an arc path. All elements are centered within an SVG canvas using a single `g` group and coordinate offsets.

DDharanitharan-J
97% match
Loading thumbnail…

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

This example shows a D3.js smiley face with animated eyebrows that move up and down in a looping transition. Built with SVG, the face consists of a yellow circle, two eye circles, two rectangular eyebrows, and an arc-based mouth. Using D3 v5’s `select` and `arc` APIs, the code appends shape elements to an SVG canvas and animates the eyebrow group with chained `transition().duration()` calls, toggling its vertical offset every two seconds.

EEbenizerR
97% match
Loading thumbnail…

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

The example shows a yellow smiley face with animated eyebrows that move up and down, while the eyes and mouth remain static. It demonstrates fundamental DOM manipulation in D3.js v5, using a single SVG canvas as the rendering target. The code builds the face by appending SVG elements—circles for the head and eyes, rectangles for eyebrows, and a path for the mouth—through D3’s selection, arc-approximation, and transition APIs. Eyebrow movement is driven by two sequential `transition().duration()` calls that adjust the eyebrow group’s transform attribute over time.

Bbobcurranart@gmail.com
97% match
Loading thumbnail…

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

The example shows a yellow smiley face with animated eyebrows that move up and down, while the eyes and mouth remain static. It demonstrates fundamental DOM manipulation in D3.js v5, using a single SVG canvas as the rendering target. The code builds the face by appending SVG elements—circles for the head and eyes, rectangles for eyebrows, and a path for the mouth—through D3’s selection, arc-approximation, and transition APIs. Eyebrow movement is driven by two sequential `transition().duration()` calls that adjust the eyebrow group’s transform attribute over time.

Bbobcurranart@gmail.com
97% match
Loading thumbnail…

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

This example shows a yellow smiley face with eyes and eyebrows that animate in a continuous up-and-down motion. The face is drawn entirely with SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path built with the `d3.arc` generator for the mouth. D3.js v5 is used for DOM selection and manipulation, while chained `transition().duration()` calls alternately raise and lower the eyebrow group. The code imports `select` and `arc` directly from the `d3` module, and positions elements relative to the SVG’s computed width and height.

Nnofferdahl
96% match
Loading thumbnail…

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

This example demonstrates how to build a smiley face using D3.js and animate its eyebrows. The code constructs SVG shapes including a yellow circle for the face, black circles for the eyes, and a mouth drawn with D3's `arc` function. It then uses D3's `.transition()` and `.duration()` methods to create a two-second animation that moves the eyebrows up and down. The example specifically showcases fundamental DOM manipulation and animation capabilities within D3.js version 5.

Eeinsko
96% match
Loading thumbnail…

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

This example demonstrates how to build a smiley face using D3.js and animate its eyebrows. The code constructs SVG shapes including a yellow circle for the face, black circles for the eyes, and a mouth drawn with D3's `arc` function. It then uses D3's `.transition()` and `.duration()` methods to create a two-second animation that moves the eyebrows up and down. The example specifically showcases fundamental DOM manipulation and animation capabilities within D3.js version 5.

Eeinsko
96% match