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)

df189ac11b7a458f87d947ed36aa0ba5

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

0 stars0🌍 Public
RRunxin Shao
Last edited May 21, 2023
Created on May 21, 2023

A yellow smiley face is drawn with SVG circles and an arc path, and its eyebrows animate by moving up and down. The example demonstrates basic D3.js DOM manipulation and transitions, using `d3.select`, `d3.arc`, and chained `transition().duration()` calls to shift the eyebrow group's transform attribute. The face is centered with a translated `g` element, and all shapes are positioned using hardcoded pixel offsets. Rendering uses SVG within an HTML page, with animation running continuously in two-second cycles.

AI-generated description

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