Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

62bd754282aa46e98303e4e1c04d3c11

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

0 stars1🌍 Public
SSANEEM MOHAMMAD
Last edited Feb 21, 2023
Created on Feb 21, 2023

A D3.js smiley face animates by moving its eyebrows up and down in a looping transition. The face is built entirely with SVG primitives—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—positioned within a centered group. Using `d3.select`, `d3.arc`, and chained `transition().duration()` calls, the code shifts the eyebrow group’s vertical translation between two offsets. A black background and yellow face with black strokes create clear visual contrast. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

AI-generated description

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