Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

0b69a2c88b1b41ad9a01767fd96fe3d5

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

0 stars0🌍 Public
SSheik Azarudeen
Last edited Dec 2, 2021
Created on Dec 2, 2021

This visualization displays a cheerful yellow smiley face centered within an SVG canvas. The face’s eyebrows rise and fall in a repeated animation, creating a lively expression. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and attribute setters to construct circles, rectangles, and an arc-based mouth. Animation relies on chained `transition().duration()` calls to move the eyebrow group vertically. The code defines explicit pixel coordinates for facial features, and the rendering uses SVG elements within a fixed 960×500 viewport.

AI-generated description

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