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)

526baacc0c4a4e078164b74261d8a8c3

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.