Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Jaeyong's Blog

Public visualization

Viewing a saved revision (read-only)

a60ce68830cf45b0a52202a1aef5d702

Jaeyong's Blog

0 stars0🌍 Public
JJaeyong Lee
Last edited Aug 24, 2021
Created on Aug 21, 2021
Forked from HTML Starter

This interactive visualization displays a cartoon smiley face constructed with SVG shapes, including a circular head, eyes, cheeks, mouth, and eyebrows, all centered on a 960x500 canvas. The face’s size scales continuously based on a range slider input, which adjusts the radius and proportionally updates all facial features. Built with React for rendering and D3’s `arc()` generator for the curved eyebrows, the code recalculates geometry on each slider event via `ReactDOM.render`. A random initial radius and a refresh loop demonstrate the dynamic updating of SVG attributes through React state changes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.