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)

9749f8b877ed4de59e88466cbc3d0afb

Let's make a face with D3.js!

0 stars0🌍 Public
Ppcbt1125
Last edited Nov 4, 2019
Created on Nov 4, 2019

A D3.js smiley face uses SVG primitives—circles, rectangles, and an arc path—to draw a yellow head, eyes, moving eyebrows, and a mouth. The animation repeatedly translates the eyebrow group up and down via chained `transition().duration()` calls, demonstrating DOM manipulation. The code constructs the face from scratch using D3’s `select`, `append`, and `attr` methods, and computes the mouth’s shape with the `arc` helper, all rendered in an SVG canvas.

AI-generated description

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