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)

842298447bc1408fb016f4deb765a085

Let's make a face with D3.js!

0 stars1🌍 Public
AAngelii
Last edited May 4, 2019
Created on May 4, 2019

A yellow smiley face rendered as SVG is built entirely through D3.js v5 DOM manipulation, with a circular head, two eyes, and a mouth drawn using `d3.arc()`. The example demonstrates layered selections and chained transitions by animating the eyebrows upward and back down over two two-second intervals. The code uses D3's `select`, `append`, and `transition` methods to construct and update elements, while a constant eye spacing offsets left and right features around the face's center. No external data is used; geometry derives from hardcoded pixel dimensions on a 960×500 viewport.

AI-generated description

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