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)

3ab798a5bcd346f7a36f85ccc9d9690d

Let's make a face with D3.js!

0 stars0🌍 Public
黃黃歆善
Last edited Sep 17, 2023
Created on Sep 16, 2023

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face from SVG primitives, complete with eyes, eyebrows, and a mouth. The eyebrows animate up and down using chained `transition().duration()` calls, shifting the eyebrow group’s `transform` attribute over two seconds. The code uses `d3.select` and `d3.arc` from the D3 v7 library, setting positions via `attr` and leveraging SVG circles, rectangles, and a path for the arc-based mouth.

AI-generated description

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