Smiley Face Part I
This example renders a smiley face using React and D3 v7, drawing yellow circles for the head, black circles for
the eyes, and a D3 arc path for the mouth. The SVG is centered via a transform, with all shape geometry
defined by scalar variables for offsets, radii, and stroke width. The visualization demonstrates declarative
composition of SVG primitives within React’s render tree, using D3’s `arc` generator to compute the mouth’s
curved path based on start and end angles.