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)

7c6545d91ae34a4784985d8880a394b8

Let's make a face with D3.js!

0 stars1🌍 Public
IIAmOscar-Liu
Last edited Jun 30, 2020
Created on Jun 30, 2020

The example draws a yellow smiley face in an SVG canvas by composing basic shapes—circles for the eyes and a path for the mouth—via D3 selections and an `arc` generator. Eyebrows, rendered as rectangles, animate upward and downward using chained `transition().duration()` calls on a group’s `transform` attribute. This demonstrates fundamental DOM manipulation and data-driven styling with D3 v5, showing how to build and animate static graphical elements without external data.

AI-generated description

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