Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Let's make a face with D3.js!

Public visualization

Viewing a saved revision (read-only)

f6caa9de5fcc4d709c76e3971c6ff80f

Fork of Let's make a face with D3.js!

0 stars2🌍 Public
KKrishna Sharma
Last edited Feb 14, 2026
Created on Feb 14, 2026

This visualization demonstrates how to create a cartoon face using D3.js, beginning with a yellow circular head and layering facial features through SVG primitives. The face includes two eyes, rectangular eyebrows, and an arc-based smile, all constructed with SVG circle, rect, and path elements. The code leverages D3.js v5 and v7 APIs, including `d3.select`, `.transition().duration()`, and `d3.arc()`, with the eyebrows animated through chained transitions that move them up and down. The rendering uses SVG with a 960x500 canvas, and the face is centered via coordinate transforms.

AI-generated description