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)

b6d4ebfeb33349a8bc5b8de04c8e80e1

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.