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)

fdd4acb60a7a49ff9b6638d8e1366253

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

0 stars1🌍 Public
Mmomopng
Last edited Feb 17, 2022
Created on Feb 17, 2022

An animated smiley face rendered in SVG demonstrates core DOM manipulation with D3.js v5. The face, built from circles, rectangles, and a path, features eyebrows that animate by chaining `transition().duration()` calls to shift their vertical position over time. The code constructs the facial features using D3’s `select` and `append` methods, with the mouth drawn via the `arc` function to generate a curved path. The example highlights basic D3 transitions and coordinate transformations within a fixed 960×500 SVG canvas.

AI-generated description

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