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 stars1🌍 Public
SSharmaAshwini
Last edited Feb 23, 2023
Created on Feb 21, 2023

This example demonstrates fundamental DOM manipulation in D3.js by constructing a static smiley face and animating its facial features. The face is composed of SVG shapes, including circles for the head and eyes, arc-based paths for eyebrows and mouth, rectangles for the nose and teeth, all colored with pink, black, red, and white fills. The animation uses D3’s `.transition()` method to move the eyebrows vertically over two-second intervals, while the code employs `d3.select`, `d3.arc`, and SVG attribute setters to position every element relative to the canvas center.

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