{"version":"1.0","type":"rich","title":"5.00 Lets Make a Face Part 5 (Multiple Files)","description":"This example renders a simple yellow face with two eyes and a smiling mouth as SVG elements in a React application. The face and eyes are drawn using plain SVG `<circle>` elements, while the mouth is generated with D3’s `arc()` generator, which produces a path with specified inner and outer radii and angular ranges. The components are split across multiple files—`FaceCircle.js`, `Eyes.js`, and `Mouth.js`—and imported into a central `index.js` that sets the viewport dimensions and positions the face in the center. React 17 manages the component hierarchy, and D3 v6 supplies the arc geometry.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/6432cb79e6c1438ab28ce7590731f661?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}