Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Viewing a saved revision (read-only)

1edaa1b1eeee43dd9a8f95607422891f

Let's make a face with D3.js!

0 stars0🌍 Public
AAndrew Yan
Last edited Jun 4, 2020
Created on Jun 4, 2020

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js v5. The code selects an SVG element, appends circles for the face and eyes, rectangles for eyebrows, and an arc path for the mouth using d3.arc(). D3 transitions move the eyebrow group up and down over four-second intervals. Static SVG attributes set positions and colors, while the transition chain animates the transform attribute.

AI-generated description

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