Jaeyong's Blog
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.