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)

bca00aae45cd458683e006e6c57f6e01

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

0 stars0🌍 Public
SSurajQWERTY
Last edited Feb 26, 2022
Created on Feb 25, 2022

This example shows a yellow smiley face built with SVG, whose eyebrows animate by moving up and down in a repeating two-second cycle. The face is centered using a translation transform on a group element, with circles for the eyes and an arc path for the mouth. The code uses D3 v5’s `select`, `arc`, and `transition` APIs to construct the shapes and drive the eyebrow motion, with dimensions and offsets defined as constants. The animation runs once on load, moving the shared eyebrow group downward, then back to its original position.

AI-generated description

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