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)

7b526430e8a7418a9d1b3545fb6f0ea6

Let's make a face with D3.js!

0 stars0🌍 Public
Kkesmith21
Last edited Nov 29, 2020
Created on Nov 29, 2020

This interactive example shows a smiley face with animated eyebrows built using D3.js. The face is composed of SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth—all centered via a transformed group. The eyebrows move up and down using chained `transition` calls with a 2000-millisecond duration. The code uses D3 v5 selectors to query the SVG, `arc` to generate the mouth’s path, and direct attribute setters for positioning.

AI-generated description

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