EbenizerR

@EbenizerR·4 public vizzes

Fork of Fork of face

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation using D3.js. The face is built from SVG shapes, including circles for the eyes and head, rectangles for the eyebrows, and an arc-generated path for the mouth. The code uses d3.select and d3.arc, with a chained transition that moves the eyebrow group up and down over two-second intervals, creating a looping eyebrow raise. Static attributes set the face dimensions and positions within a 960 by 500 SVG canvas.

Dec 13, 2021

Loading thumbnail…

Fork of face

This example shows a simple smiley face built with D3.js, rendered as SVG with a yellow circle, eyes, and a mouth. The code demonstrates fundamental DOM manipulation by using `d3.select` to append elements and `transition.attr` to animate the eyebrows, which move upward and then back down in a looping 2-second cycle. It relies on the D3 v5 API, including `arc` for the mouth path, with dimensions defined by hardcoded constants for spacing and radii.

Dec 13, 2021

Loading thumbnail…

face

A yellow smiley face is centered in an SVG canvas, with two eyes, a mouth drawn using a D3 arc path, and rectangular eyebrows that animate upward and back down in a looping transition. Built with D3 v5, the example demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups and shapes, and using chained `transition().duration()` calls to move the eyebrows via transform attributes.

Dec 13, 2021

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.

Dec 13, 2021