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)

fc251549f8654a4cb0fb72c89f1e368a

Let's make a face with D3.js!

0 stars0🌍 Public
JJelmer Overeem
Last edited Nov 4, 2020
Created on Nov 4, 2020

A D3.js animation builds a smiling face from SVG primitives: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows animate by translating vertically in a repeated two-second loop, using chained `transition` calls to move them up and down. The code constructs the face with `select`, `append`, and `attr`, and calculates the mouth’s arc with the `arc` function, all within an SVG canvas sized 960 by 500 pixels.

AI-generated description

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