Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Eeinsko
Last edited Oct 20, 2023
Created on Oct 20, 2023

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.

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

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives, including a yellow circle head, eyes, and a mouth arc. The animation shows the eyebrows moving up and down repeatedly by chaining `transition().duration()` calls on the eyebrow group, which translate vertically. The code builds the face using `d3.select`, `svg.append`, and `d3.arc` to generate the mouth path, with all elements arranged via absolute coordinates. The animation runs automatically on load, cycling the eyebrow position every two seconds.

Mminpugithub
97% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with animated eyebrows. The face is constructed using SVG elements, including a yellow circle for the head, two circles for eyes, and an arc-generated mouth. The eyebrows, rendered as rectangles, move up and down using chained `transition().duration()` calls to create a looping animation. The code uses D3 v5’s `select`, `arc`, and transition APIs to handle element creation and animation.

DDanyalMazhar
97% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes. A yellow circle, two eyes, a mouth drawn using the `d3.arc` function, and rectangular eyebrows are all appended to an SVG container. The eyebrows animate by moving up and down through a chained `transition` with `attr` changes, using a two-second duration for each movement. The code uses D3 v5’s `select` and `arc` methods, with the animation running once on load.

Llerik03
97% match
Loading thumbnail…

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

This example builds a yellow smiley face with D3.js and animates its eyebrows upward in a repeating two-second cycle. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition` calls to move the eyebrow group’s `transform` attribute. Circles form the eyes and a yellow circle with a black stroke forms the head, all rendered in SVG. The animation demonstrates basic DOM manipulation and timed transitions with D3 v5.

CChromosin13
97% match
Loading thumbnail…

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

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows. The code uses D3 v5 selections to append SVG circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered via a transformed group. The eyebrows transition vertically over two 2-second intervals using chained `transition().duration()` calls, moving up and then back down. The visualization showcases how D3 can create and animate geometric shapes through declarative SVG attribute setting.

AApril Fangzhu Guo
97% match
Loading thumbnail…

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

This example shows a yellow smiley face built from basic D3.js shapes, with animated eyebrows that move upward and then return to their original position. The face is constructed using SVG circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The code uses D3 v5 selections, attribute manipulation, and chained `transition` calls with explicit durations to drive the eyebrow animation on a fixed 960×500 canvas.

Nnamesh singh
96% 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
96% match