Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

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

0 stars0🌍 Public
AAmmar-vepari
Last edited Mar 14, 2023
Created on Mar 14, 2023

This example demonstrates basic DOM manipulation with D3.js by constructing a smiley face from SVG shapes: a yellow circle for the head, two eyes, and an arc-based mouth. The eyebrows, drawn as rectangles, animate upward and then downward in a looping sequence using D3 transitions over two seconds each. The code uses D3 v5’s `select`, `append`, and `attr` methods to build the scene, and the `arc` API to generate the mouth path from radius and angle parameters. The animation runs automatically on page load within an SVG canvas.

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