Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
EErikaLozada
Last edited Aug 19, 2021
Created on Aug 19, 2021

A smiley face built with D3.js animates its eyebrows upward and downward in a looping transition. The code uses `d3.select`, `d3.append`, and `d3.arc` to construct SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth—within a centered group. The eyebrows move via chained `transition` and `.attr` calls over a two-second duration, demonstrating fundamental DOM manipulation in D3 v5.

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 shows a D3.js smiley face with animated eyebrows that move up and down in a looping transition. Built with SVG, the face consists of a yellow circle, two eye circles, two rectangular eyebrows, and an arc-based mouth. Using D3 v5’s `select` and `arc` APIs, the code appends shape elements to an SVG canvas and animates the eyebrow group with chained `transition().duration()` calls, toggling its vertical offset every two seconds.

EEbenizerR
97% match
Loading thumbnail…

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

A D3.js smiley face animates its eyebrows in a looping vertical motion, shifting up and down every two seconds. The face is drawn entirely with SVG primitives: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path created with the `arc` generator for the mouth. The code uses `d3.select` to manipulate the SVG canvas, handles mouse events implicitly through transitions, and relies on D3 v5's `transition().duration()` method to animate the eyebrow group's transform attribute. The layout is centered via a translation transform based on the viewport dimensions.

BBKirst3
97% match
Loading thumbnail…

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

A smiley face built with D3.js animates its eyebrows up and down in a looping transition. The SVG face consists of circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` function for the mouth. Code uses D3 selections, `transition().duration()`, and attribute manipulation to shift the eyebrow group’s vertical position. The yellow head and black outlines are rendered directly via SVG attributes, with no external data source.

KKCharoenkwan
97% match
Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a looping vertical motion, demonstrating fundamental DOM manipulation. The visualization constructs the face using SVG shapes—a circle for the head, circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` for the mouth. Coordinates are centered via a translated `<g>` element, and the eyebrow movement is driven by chained `transition` calls that shift the group’s `transform` attribute over 2-second intervals. The code relies on D3 v5’s `select`, `attr`, and `transition` APIs, with a fixed viewport defined in the HTML.

NNeil Chen
97% 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
97% match
Loading thumbnail…

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

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate chained transitions on the eyebrows. The face, built with `d3.select` and `d3.arc` for the mouth, animates both rectangular eyebrows upward over two seconds, then returns them to their original position. The eyebrows move as a group via `transition.attr` on the transform attribute, while static circles and rectangles define the eyes and brows. This example shows basic DOM manipulation and timed animation without external data.

LLozakaka
97% 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. The face is drawn entirely with SVG primitives—a circle for the head, smaller circles for the eyes, rectangles for the eyebrows, and a path generated by `d3.arc` for the mouth. Using `d3.transition` with a two-second duration, the eyebrow group repeatedly shifts vertically, creating a bobbing motion. The code leverages D3 selections and attribute setting to build the static facial features, then applies chained transitions to animate the eyebrows independently of the rest of the face.

Aaanawaz
96% match
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
96% match