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)

aa061db048834a408ce6ab3a936fb560

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

0 stars2🌍 Public
SSnapika
Last edited Feb 19, 2022
Created on Feb 19, 2022

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—all positioned relative to a centered group. D3's `transition()` and `duration()` methods repeatedly shift the eyebrow group up and down over two-second intervals, creating a continuous bobbing motion. The example demonstrates core D3 selections and DOM manipulation without external data, relying solely on hardcoded dimensions and the `arc()` helper for the mouth shape.

AI-generated description

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