{"version":"1.0","type":"rich","title":"Smiley Refactored","description":"This example displays a yellow smiley face with black-outlined circular eyes and a curved mouth, centered on a blank canvas. It demonstrates component-based visualization with React, breaking the face into separate modules like `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. The code uses d3’s `arc` API to generate the mouth path, while React components pass numeric props for positioning and sizing. The face is rendered as SVG elements within a translated `<g>` group, with fixed dimensions of 960 by 500 pixels.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a57a690001854430b0f2ac8ecc4341ba?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}