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)

65266523098b41438466d1c2144dc755

Let's make a face with D3.js!

0 stars0🌍 Public
PPetetoni
Last edited May 22, 2020
Created on May 22, 2020

This example animates a smiley face composed of SVG shapes, including a yellow head, eyes, ears, nose, and a mouth, with eyebrows that rise and fall. The face is centered within an SVG canvas using D3.js’s `select` and `append` methods. The code uses `d3.arc` to generate the ear, nose, and mouth paths, while the eyebrow motion is driven by chained `transition().duration()` calls. All shapes are drawn directly with D3’s DOM manipulation, relying on the SVG rendering and animation capabilities.

AI-generated description

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