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)

545f0c293c7343d9acb136d44ae3ef0b

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

0 stars0🌍 Public
WWeiyiDeng
Last edited Feb 23, 2022
Created on Feb 23, 2022

A yellow smiley face drawn with SVG shows subtle animation: both eyes shrink and regrow over two seconds each, while the eyebrows shift upward and back. The code uses D3 v5 selections and transitions, with `select`, `arc`, and `transition.attr` to manipulate SVG circles, rectangles, and a path. The face is centered via a translated `g` element, and all motion loops once without user interaction.

AI-generated description

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