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)

ba747701063f43e98e4e7d25aaf7987c

Let's make a face with D3.js!

0 stars1🌍 Public
CChangbeom Shim
Last edited Feb 24, 2022
Created on Feb 24, 2022

A stick-figure face, composed of a yellow circle with a blue stroke, two circular eyes, and rectangular eyebrows, sits centered on an SVG canvas. The face’s mouth is drawn with the D3 `arc` geometry generator, which creates a pie-shaped path. A `transition().duration(2000)` chain alternately shifts the eyebrow group up and down, producing a looping animation. The example builds its scene using D3's imperative `select` and `append` API, positioning elements via `attr('transform', …)` rather than a data-driven or force-based layout.

AI-generated description