Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

be68fd74b5334dc09edcc534ba697cae

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

0 stars1🌍 Public
JJiachen Xu
Last edited Dec 20, 2021
Created on Dec 20, 2021

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The face is drawn using SVG shapes: a circle for the head, circles for eyes, a path with `d3.arc()` for the mouth, and rectangles for eyebrows. D3’s `transition()` method moves the eyebrow group vertically over 2000 milliseconds, creating a continuous up-and-down motion. The code selects the SVG element, appends groups with `translate` transforms, and positions all facial features relative to the canvas center using fixed pixel offsets.

AI-generated description

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