Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
GGordeev Alex
Last edited May 19, 2021
Created on May 19, 2021

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with black-outlined features and proportional spacing. The example demonstrates fundamental DOM manipulation and chained transitions, as the eyebrows move up and down in a repeating animation cycle. The code uses D3's `select`, `arc`, and `.transition()` methods to construct and animate the face, with static circles, rectangles, and a mouth path.

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!

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
Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas, with two eyes and a mouth created using D3's `arc` generator. The eyebrows, rendered as rectangles, animate upward and back down repeatedly via chained `transition` calls with a 2-second duration each. The code uses D3 v5 selections to append circles, rectangles, and a path, and stores numeric layout variables for spacing and offsets.

Aanmarsan
96% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows and a shifting mouth is drawn as SVG elements using D3.js v5. The code builds the face by appending circles, rectangles, and an arc path to a group, then applies chained `transition` calls with a 2000-millisecond duration to move the eyebrows upward and alter the mouth’s end angle. It uses D3’s `select`, `arc`, and attribute manipulation to demonstrate fundamental DOM updates and transitions without any data source.

YYuqi Tang
96% match
Loading thumbnail…

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

A yellow smiley face rendered in SVG demonstrates D3.js DOM manipulation and animation. The code appends circles for the eyes, red nose, and arc-generated mouth, while rectangles serve as eyebrows that move via chained `transition.attr` calls over two-second intervals. Using `d3.select` and `d3.arc`, it builds the face from static shapes then animates the eyebrow group’s transform, showing basic enter-append and transition patterns with D3 v5.

TTomislav Pezer
96% match
Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas as a circle with eyes, eyebrows, and a mouth, built by manipulating DOM elements with D3.js v5. The code uses `select`, `append`, and `attr` to construct the shapes, and `transition` to animate the eyebrow group moving down and back up over a 4-second loop. The mouth is a path generated with the `arc` function, creating a curved shape from specified angles.

Hhunianhang
96% match
Loading thumbnail…

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

This example creates a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth centered within an SVG canvas. D3.js selections append SVG shapes and apply a two-second `transition` that moves the eyebrow group upward by 50 pixels and then back down, producing a repetitive animation. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition.attr` calls to alter the `transform` attribute, demonstrating fundamental DOM manipulation with version 5 of the library.

Ccharliemok
96% match
Loading thumbnail…

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

D3.js draws a yellow smiley face with animated eyebrows and a static arc mouth on an SVG canvas. The code uses d3-selection to append circles for the eyes and face, rects for the eyebrows, and d3-shape’s `arc()` for the mouth. A chained `transition()` moves the eyebrow group up and down in a looping two-second animation, demonstrating basic DOM manipulation and simple, time-based SVG transitions.

Jjerry70938@gmail.com
96% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3 v5. Using SVG shapes, the code draws a circle for the face, two circles for eyes, and rectangles for eyebrows, while an arc generator creates the mouth. The eyebrows move vertically through chained `transition().duration()` calls, and the entire face is centered using an SVG `g` transform. This example focuses on core D3 selections and transitions.

LLG0498
96% match