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)

667b424109ad4e39abe14ff3bcc184f2

Let's make a face with D3.js!

0 stars2🌍 Public
HHuiling0220
Last edited Nov 10, 2018
Created on Nov 10, 2018

A yellow circle face with black-outlined features is built from SVG shapes using D3 selections. The code creates concentric facial elements—two circles for eyes, two rectangles for eyebrows, and an arc-generated mouth—positioned via translation transforms. The eyebrows animate through chained `transition().duration()` calls that move them vertically down and back up over two seconds each. The example demonstrates how D3 v5’s `arc` generator and SVG group elements compose a stylized character from primitive shapes.

AI-generated description