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)

8bc8671e20ed4454a0dfc22a91ab414d

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.