Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of Let's make a face with D3.js!

Public visualization

Fork of Fork of Let's make a face with D3.js!

0 stars1🌍 Public
Cczhang746
Last edited Feb 18, 2023
Created on Feb 18, 2023

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth. The eyebrows animate by moving upward and then returning to their original position using chained `transition().duration(2000)` calls on a group element. The code uses D3 v5’s `select`, `append`, `attr`, and `transition` methods, along with the `arc` generator for the mouth path. All rendering occurs in an SVG canvas, with dimensions set to 960 by 500 pixels.

AI-generated description

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

Comments

Sign in to join the discussion.

MIT Licensed