Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

74e0ed3a73a1477ea13975ba49a5c7cf

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

0 stars0🌍 Public
MMzia001
Last edited Nov 4, 2022
Created on Nov 4, 2022

This example uses D3.js to construct a smiley face from SVG primitives, with animated eyebrows that move up and down. The code leverages `d3.select`, `d3.arc`, and chained transitions to manipulate the DOM directly, drawing a yellow circle, eyes, rectangular brows, and a mouth. The eyebrows animate via two sequential `transition().duration()` calls, shifting their vertical position over four seconds. All shapes are rendered in an SVG container with hardcoded dimensions and styling from an external stylesheet.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.