Learning data viz
This example shows a simple smiley face built with React and D3, rendered as SVG shapes. The code uses React to define the component structure and `arc` from `d3` to generate the mouth path, while static circles form the face, eyes, and outline. The face is centered using SVG transforms, with dimensions and offsets defined as constants. The visualization demonstrates how to combine React’s declarative UI with D3’s geometry utilities without any interactive features or external data.