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)

653866a0b1d74a6daa4cf30fce5b9d65

Let's make a face with D3.js!

0 stars0🌍 Public
NNTCHANG1289
Last edited Nov 8, 2018
Created on Aug 29, 2018

This gallery example demonstrates a smiley face built with D3.js that cycles through animated transformations. The face’s circle, eyebrows, and mouth transition over time, shifting its fill color between yellow, purple, and pink while the eyebrows move and the mouth’s arc changes shape. The visualization uses D3’s `select` and `append` to manipulate SVG elements, and the `transition()` API to animate attributes. It relies on D3’s `arc` generator for the path data and SVG for rendering.

AI-generated description

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