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)

6a7f121eb1844737b99141e4e9f23883

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

0 stars1🌍 Public
PPYATA SHARAN
Last edited Feb 23, 2023
Created on Feb 23, 2023

This animated SVG example uses D3.js v5 to construct a stylized smiley face with a yellow circle, two eyes, a curved mouth, and moving eyebrows. The underlying code demonstrates DOM manipulation by building each facial feature through `d3.select` and `svg.append` methods. The eyebrows animate by chaining `d3.transition` calls, moving them upward and back over two-second intervals. The mouth shape is generated through `d3.arc` with specified inner and outer radii and angular ranges, while all coordinates are calculated relative to the visualization's center.

AI-generated description

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