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)

9d60c80658524f9aafd34d50134136ee

Let's make a face with D3.js!

0 stars0🌍 Public
Ccollv004
Last edited Feb 2, 2020
Created on Feb 2, 2020

A yellow smiley face is drawn with D3.js, featuring two eyes, a curved mouth, and animated eyebrows that move up and down in a looping transition. The visualization demonstrates fundamental DOM manipulation by appending and transforming SVG shapes (`circle`, `rect`, `path`) within grouped elements (`g`), using D3 v5’s selection and transition APIs. The face is centered via a translated group, and the mouth is generated with D3’s `arc` shape helper, while the eyebrow motion relies on chained `.transition().duration()` calls.

AI-generated description

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