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)

70c9e6a9b2e54ec0b847d3f95ba82c66

Let's make a face with D3.js!

0 stars0🌍 Public
BBrian Merchant
Last edited Jul 31, 2020
Created on Jul 31, 2020

A smiley face rendered with D3.js demonstrates basic DOM manipulation and animation. The code uses D3 selections to append SVG circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. A two-stage `transition` moves the eyebrow group vertically over four seconds, creating an animated expression. The face is centered via SVG transforms, with all shapes drawn using D3's `select`, `append`, `attr`, and `transition` APIs.

AI-generated description

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