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)

52b405962c294c76bf0af6357c85028a

Let's make a face with D3.js!

0 stars1🌍 Public
RRiley Jamel Green
Last edited Sep 23, 2019
Created on Sep 22, 2019

A yellow smiley face with moving eyebrows demonstrates core D3.js DOM manipulation. The code uses d3-selection to append SVG circles for the eyes and face, rects for the eyebrows, and a d3-shape arc for the mouth. Chained transitions animate the eyebrow positions over two seconds each, lifting the left brow upward while the right brow returns to its original spot, all within a fixed 960x500 SVG canvas.

AI-generated description

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