Skip to main content
SimilarExport ZIP
100%

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

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

This example builds a yellow smiley face with D3.js version 5, demonstrating fundamental DOM manipulation and animation. It constructs the face using SVG circles for the eyes and an `arc` generator for the mouth, while the eyebrows are rectangles that move via chained `transition().duration()` calls. The code uses D3’s `select` to bind to an SVG element and positions elements through translation transforms. The animation cycles the eyebrows up and down over two-second intervals, showcasing basic enter-update-exit patterns without any 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 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 shows a yellow smiley face with eyes, eyebrows, and a mouth, built using D3.js v5. The face elements are drawn as SVG shapes, with the mouth created using the `arc` function. The eyebrows, rendered as rectangles, animate vertically through chained `transition` calls, moving up and then returning to their original position over two seconds. The code uses D3 selections and attribute manipulation to construct and transform the visual components.

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

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

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The face is built from SVG circles, rectangles, and an arc-generated mouth path, centered within a fixed 960×500 viewport. Using D3 v5, the eyebrows transition vertically via chained `transition().duration()` calls, moving down 50 pixels and back over four seconds. The code imports `select` and `arc` from the D3 library, constructs the face with SVG shapes, and applies no external data—relying entirely on hardcoded geometric constants for positioning.

DDeclan Naughton
96% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by drawing a smiley face with yellow circular head, eyes, eyebrows, and an arc-based mouth. The animation shows the eyebrows moving up and down repeatedly, using D3's transition system to create a two-second duration tween between transform states. The code imports `select` and `arc` from the D3 library, builds SVG shapes through chained `.attr()` calls, and relies on `d3.v5` with SVG rendering.

ZZakaria EL
96% 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
96% match
Loading thumbnail…

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

This example shows a yellow smiley face built entirely with D3.js v5, featuring two eyes and a curved mouth drawn with an arc path. The face’s eyebrows, rendered as rectangles, animate up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 selections to append SVG elements, `d3.arc` for the mouth, and attribute manipulation to position the facial features relative to the SVG's center. All rendering occurs in an inline SVG with CSS hiding page overflow.

JJenifer Vivar
96% match
Loading thumbnail…

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

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

Ssd2beatles
96% match