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)

60a094a804dc423fb0f67a19612a3675

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

0 stars0🌍 Public
Rrohitchavan007
Last edited Oct 9, 2023
Created on Oct 9, 2023

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives—a yellow circle, two eyes, eyebrows, and a mouth—and animating the eyebrows through a two-stage transition. The code uses D3 v5’s `select`, `append`, and `attr` methods to build the SVG structure, while the `transition().duration(2000)` API moves the eyebrow group vertically in a looping sequence. The mouth is drawn with the `arc` shape generator, and static layout parameters such as `eyeSpacing` and `eyebrowYOffset` control facial proportions.

AI-generated description

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