Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Mminpugithub
Last edited Oct 13, 2023
Created on Oct 13, 2023

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.

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 constructing a smiley face from SVG shapes, including a yellow circle head, eyes, a line nose, and an arc mouth. The code animates the eyebrows using chained `transition().duration()` calls, moving them upward and back down over two seconds. It uses D3 v5’s `select` to target the SVG element and `arc` to generate the mouth path, with all elements appended to a centered group. The rendering relies entirely on SVG and animation, with no external data source.

Mmivan000
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 demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face whose eyebrows animate up and down. The code uses d3.select, d3.append, and d3.attr to construct SVG shapes including circles, rectangles, and an arc-based mouth. A d3.transition with a 2000-millisecond duration cycles the eyebrow group’s translate transform between two vertical positions, creating a looping motion. The page loads d3.v5 from a CDN and renders entirely in SVG with no external data source.

Nnshedd
97% 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
97% 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
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 building a smiley face from SVG shapes. A yellow circle forms the head, with black circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The eyebrows animate upward and downward via chained `transition().duration()` calls, moving their containing group’s `transform` attribute over two seconds. The code uses D3 selections, `attr()`, and `append()` to construct elements, alongside the `arc()` generator from D3’s shape module.

HHojjat Karami
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 primitives—a yellow circle, two eyes, eyebrows, and a mouth—and animating the eyebrows through a two-stage transition. The code uses D3 v5’s `select`, `append`, and `attr` methods to build the SVG structure, while the `transition().duration(2000)` API moves the eyebrow group vertically in a looping sequence. The mouth is drawn with the `arc` shape generator, and static layout parameters such as `eyeSpacing` and `eyebrowYOffset` control facial proportions.

Rrohitchavan007
97% match