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)

f76b39dc19734c11a1073ff5414f836d

Let's make a face with D3.js!

0 stars2🌍 Public
Aaxliao
Last edited Jul 20, 2019
Created on Jul 8, 2019

A D3.js smiley face composition uses SVG circles for the head and eyes, rectangles for eyebrows, and an arc path for the mouth. The eyebrows undergo an animated sequence via chained `transition().duration(2000)` calls on the group element, moving them down and back up. The code constructs the face using D3 v5 selection and path-arc helpers on a 960×500 canvas.

AI-generated description

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