{"version":"1.0","type":"rich","title":"Smiley Face V - React Components in Different Files","description":"A React visualization renders a yellow smiley face as an SVG, with the background circle, eyes, and mouth split into separate component files. The `BackgroundCircle` component draws a yellow circle with a black stroke, while `Eyes` uses two circle elements positioned with offset coordinates. The `Mouth` component employs a D3 `d3.arc()` generator to create a curved path. The main `App` component imports these modules, centers a `<g>` group via transform, and passes numeric props for dimensions like radius, stroke width, and eye spacing, using ReactDOM to mount the result.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/713a98b46d5746dfbdb6700c18b805ad?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}