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)

e9642f6389e3485cb20367cb34e16429

Let's make a face with D3.js!

0 stars0🌍 Public
Ffahmijaafar
Last edited Dec 5, 2019
Created on Dec 4, 2019

D3.js v5 builds a smiley face from primitive SVG shapes, with rectangles and semicircular arcs animating into place over two seconds via chained `transition().duration()`. The code uses `select`, `line`, and `arc` from the D3 module, drawing a circle for the head and moving blocks for features. An embedded video demonstrates the eyebrow movement, while the SVG canvas (960×500) hosts the static, animated construction.

AI-generated description

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