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)

e8f4c0979e654024912df90a6491aeca

Let's make a face with D3.js!

0 stars1🌍 Public
CChooo4u
Last edited Sep 8, 2018
Created on Sep 8, 2018

A D3.js v5 animation builds a smiley face from SVG shapes, using circles for the head, eyes, pupils, and cheeks, plus path and rect elements for the mouth and brows. The code demonstrates fundamental DOM manipulation and transitions: the pupils and eyebrows move via chained `transition().duration()` calls that repeatedly shift their `transform` attributes. It also uses the `arc()` generator from D3 to shape the mouth and left eyebrow, all drawn on a fixed 960×500 SVG canvas without external data.

AI-generated description

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