Skip to main content
100%

Let's make a face with D3.js!

✓ Published1🌍 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.

MIT Licensed

Similar vizzes