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)

490f4431005c4f9892ddd1d950b9d798

Let's make a face with D3.js!

0 stars0🌍 Public
Ssammytheindi
Last edited Dec 11, 2019
Created on Dec 11, 2019

A D3.js visualization assembles a smiley face from SVG shapes, including a yellow circle, two eyes, rectangular eyebrows, and an arc-shaped mouth. The code demonstrates fundamental DOM manipulation by building each facial feature through chained `attr` and `append` calls. Using `d3.select`, `d3.transition`, and the `d3.arc` path generator, the eyebrows animate over four seconds, alternately shifting downward and returning, while the static features remain unchanged. The SVG canvas is 960 by 500 pixels.

AI-generated description

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