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)

9bd448981bf74d47b5c3ac20c95bf034

Let's make a face with D3.js!

0 stars1🌍 Public
LLaurentVuillon
Last edited Dec 25, 2019
Created on Dec 25, 2019

This interactive visualization builds a smiling face with D3.js, using SVG shapes for the head, eyes, eyebrows, and mouth. It demonstrates fundamental DOM manipulation and chained transitions by animating the eyebrows and mouth up and down in a looping sequence. The code leverages D3’s `select`, `append`, and `attr` methods to construct the scene, while the `transition().duration()` API drives the two-second animated movements. A static yellow circle, black-stroked head, and arc-based mouth are also defined using D3’s `arc` helper, all rendered on a 960-by-500 SVG canvas.

AI-generated description

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