Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a better face with D3.js!

Public visualization

Viewing a saved revision (read-only)

e0191d79be5d4a2bb330316f1754e0a1

Let's make a better face with D3.js!

0 stars0🌍 Public
AAniv Chakravarty
Last edited Feb 24, 2023
Created on Feb 24, 2023

This example builds a cartoon face from SVG primitives using D3.js v5, with animated eyebrows that move up and down in a 9-second cycle. The code constructs ears, eyes, a nose, hair, and a mouth using `d3.select`, `append`, and `attr` methods, while the `d3.arc()` path generator draws curved shapes like the hair and chin. A `transition().duration(9000)` chain animates the eyebrow group’s vertical transform. The face is centered on a 960×500 canvas, and the rendering uses pure SVG with no external data source.

AI-generated description

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