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)

9d0486e12a574045843433f5e93b69eb

Let's make a face with D3.js!

0 stars0🌍 Public
JJishen Xu
Last edited Aug 25, 2018
Created on Aug 25, 2018

This example demonstrates how D3.js can build an animated smiley face from SVG primitives, showing a yellow circle head with black eyes, arched eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 v5 selections, the `arc` generator to create the mouth path, and SVG attribute binding for positioning. All elements are centered dynamically using the SVG’s width and height, with facial features offset by fixed pixel values.

AI-generated description

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