Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Smiley face using D3

Public visualization

Viewing a saved revision (read-only)

e7452763c6674e639b9a8a4c10db6a78

Smiley face using D3

0 stars0🌍 Public
AAyush Gupta
Last edited Jan 7, 2021
Created on Jan 7, 2021

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation, with animated eyebrows that move up and down. The code draws yellow circles for the face and eyes, rectangles for eyebrows, and an arc-generated mouth, all positioned via D3 selections and transforms. A transition chain animates the eyebrow group’s vertical position over four one-second intervals, showcasing repeated attribute updates. The example relies on D3 v5’s `select`, `arc`, and `transition` APIs within a static SVG container.

AI-generated description

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