{"version":"1.0","type":"rich","title":"Let's Make a Face Part IV (React Components & ES6)","description":"This example shows a yellow smiley face built from SVG primitives—a background circle, two eye circles, and a mouth arc—centered on a 960-by-500 canvas. The face is composed entirely of React components, with the `BackgroundCircle` defined as a reusable component and the `App` component rendering the full SVG. The mouth’s crescent shape is generated using D3’s `arc` generator, which supplies the `d` path data. The code imports React, ReactDOM, and D3’s `arc`, and renders the result into a `#root` div, demonstrating how to combine React’s component model with D3’s geometric utilities for declarative, ES6-based visualization.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/8ba27d29df1048e7894330ea7da4f4fe?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}