Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSujata Shrestha
Last edited Nov 14, 2022
Created on Nov 14, 2022

A smiley face is drawn in SVG with a yellow circular head, black stroke, and a mouth. Animated eyebrows repeatedly move up and down over two seconds using D3's transition system. The example demonstrates DOM manipulation with `select` and `append`, building shapes with `circle`, `rect`, and `path`, and uses `d3.arc` to generate the mouth’s arc path. The rendering is entirely in SVG.

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 D3.js smiley face demonstrates fundamental DOM manipulation and animation. The face consists of a yellow circle, two eyes, and a mouth arc, with rectangular eyebrows that animate up and down over two-second transitions using chained `transition` calls. The SVG elements are positioned using translation transforms within a central group. The example uses D3 v5 with the `select`, `append`, `attr`, and `arc` APIs to build and animate the face, rendering via SVG in a browser.

Sserrulate@gmail.com
96% match
Loading thumbnail…

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

A smiley face built with SVG and animated with D3.js demonstrates fundamental DOM manipulation. Yellow circular head, two eyes, rectangular eyebrows, and a curved mouth are created using D3 selections and the `d3.arc` path generator. The eyebrows repeatedly move up and down via chained `transition` calls, each lasting two seconds. The code uses D3 v5, imports `select` and `arc` from the library, and renders entirely in SVG without external data.

Vvram80
96% 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, 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
96% 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 forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows, rendered as rectangles, animate upward and then back down through chained `transition().duration()` calls. The code imports `select` and `arc` from D3 v5, uses SVG elements for rendering, and relies on data-driven attributes to position features relative to the viewport dimensions.

RRadhika Ganapathy
96% match
Loading thumbnail…

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

A smiley face rendered with SVG demonstrates fundamental DOM manipulation and animation in D3.js. The yellow circle, eyes, eyebrows, and arc-based mouth are constructed using selections and the `d3.arc` generator. The eyebrows move via chained `transition` calls over two-second durations, shifting their group's `transform` attribute up and down. The animation loops by alternating between two translate positions, while the static elements remain fixed. D3 v5 handles the SVG creation and all attribute updates.

NNic Dominguez
96% match
Loading thumbnail…

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

A smiley face drawn with SVG elements demonstrates fundamental DOM manipulation and animation with D3.js v5. The face features a yellow circle, two eyes, and a mouth created using the `arc` generator, while the eyebrows animate upward and downward via chained `transition` calls. The code uses `select` and `append` to build the SVG structure, and CSS hover and active states change the face's fill color. The example focuses on showing how D3 can construct and transform visual elements through data-independent selection methods.

XXenos Panagiotis
96% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered as an SVG. The face is built from D3.js selections, including circles for the eyes and an arc path for the mouth. Both eyebrows, drawn as rectangles, move upward and then return to their original position using chained `transition().duration()` calls. The example demonstrates fundamental DOM manipulation with d3.select and d3.arc.

Sswapan-datahawklab
96% match
Loading thumbnail…

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

A yellow smiley face is drawn in an SVG canvas, with animated eyebrows that move up and down repeatedly. The example demonstrates fundamental DOM manipulation with D3.js, using a simple data-free composition of SVG shapes: circles for the face and eyes, rectangles for eyebrows, and a path created with the `d3.arc` generator for the mouth. D3's `transition` method triggers the eyebrow animation, while the `select` and `append` APIs build the hierarchical SVG structure centered on the canvas.

AAsimali39
96% match