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)

a923b636552946a2a1068c7c7b2b190b

Let's make a face with D3.js!

0 stars0🌍 Public
AAntonino Praxedes
Last edited May 7, 2020
Created on May 7, 2020

A D3.js animation constructs a smiling face from SVG shapes and then animates its eyebrows. The face is drawn using circles for the eyes and head, rectangles for the eyebrows, and a path for the mouth, created with the `arc` shape generator. Eyebrow movement occurs through chained `transition().duration()` calls on the group’s `transform` attribute, shifting it vertically. The code uses D3 v5 selection, attributes, and the `arc` API, rendering all elements as SVG within a 960 by 500 canvas.

AI-generated description

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