Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Let's make a face with D3.js!

1 star1🌍 Public
Aarg04
Last edited Jul 2, 2020
Created on Jul 2, 2020

This example builds a yellow smiley face with D3.js, featuring eyes, eyebrows, and a mouth rendered as SVG shapes. The code uses D3 selections to append a circle for the face, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. A chained `transition` with a 2-second duration animates the eyebrow group’s vertical position upward and then back, creating a moving-brow effect. The face is centered within a 960×500 SVG, and the animation runs once on page load.

AI-generated description

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

Comments

Sign in to join the discussion.

MIT Licensed