Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Viewing a saved revision (read-only)

9905d1e087894385b0ffd7c9e2423bfa

Let's make a face with D3.js!

0 stars0🌍 Public
Mmihir2709
Last edited Jul 6, 2020
Created on Jul 6, 2020

A yellow smiley face is drawn using D3.js v5, with its eyebrows animating upward and back down in a continuous loop. The visualization demonstrates fundamental DOM manipulation by building the face from basic SVG shapes: circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. The code uses `d3.select` and `d3.arc` to construct elements, while chained `transition` calls with a 2000-millisecond duration animate the eyebrow group's transform. The resulting animation repeats, showcasing how D3's data-driven approach applies to static and dynamic visual elements.

AI-generated description

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