Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3Training

Public visualization

Viewing a saved revision (read-only)

5308fc797a0d4ccaad91dbf710e71b8f

D3Training

0 stars0🌍 Public
Kkkkyeung
Last edited Apr 2, 2021
Created on Apr 2, 2021

This example uses D3.js v6 to create an animated smiley face, demonstrating fundamental DOM manipulation through chained method calls. An SVG canvas displays a yellow circle with black stroke as the face, containing eyes, eyebrows, and a mouth. The eyebrows are rectangles that automatically animate upward and then back down using sequential `.transition().duration(2000)` calls on a group element. The face is centered using a translate transform, while the mouth is drawn with the `arc()` generator from D3.

AI-generated description

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