Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Mmk03985
Last edited Apr 11, 2022
Created on Apr 11, 2022

An animated smiley face demonstrates fundamental DOM manipulation with D3.js. The face, rendered as SVG, features yellow circular head, eyes, and eyebrows that transition vertically in a looping sequence using chained `transition` calls. A mouth is drawn with `d3.arc` path generator. The code imports `select` and `arc` from D3 v5, using selections to append and style SVG elements while `transition().duration()` animates the eyebrow group’s transform attribute.

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 smiley face drawn in SVG animates its rectangular eyebrows upward and downward in a repeating two-second cycle using chained `selection.transition()` calls. The face consists of a yellow circle, two black eye circles, and a mouth path created with the `d3.arc` shape generator. D3 v5 selects the SVG element, sets up a centered group, and applies transforms for facial features. The code demonstrates fundamental DOM manipulation and data-driven styling in D3 without external datasets.

Mmk03985
97% match
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 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 with animated eyebrows demonstrates fundamental D3.js DOM manipulation and transitions. The face is built by appending SVG circles for the eyes and face, rectangles for eyebrows, and a path generated with `d3.arc` for the mouth. Using `.transition().duration(2000)`, the eyebrow group shifts vertically down and back up, creating a repeated motion. The code explicitly imports `select` and `arc` from the D3 v5 library.

44charan4
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!

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!

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 D3.js smiley face animation demonstrates basic DOM manipulation with SVG shapes. The yellow face, eyes, and mouth are drawn using D3 selections and the `arc` generator, while the eyebrows move up and down through chained `transition` calls over 2000ms intervals. The code uses `select` to target the SVG element, dynamic width and height attributes, and group elements (`g`) to structure the face components. The animation loops by transitioning the eyebrow group's transform attribute back and forth.

JJeremie
96% match