{"version":"1.0","type":"rich","title":"D3-React-JSX-ES6 DOM Structure","description":"This example demonstrates a smiling face constructed with React components and D3, rendered as SVG. It shows how React manages the DOM structure while D3 generates the mouth path using the `arc` generator from `d3-shape`. The face includes a background circle, two eyes, and a curved mouth, all positioned via SVG group transforms. The code uses React 16.9, ReactDOM, and D3 v6, with components like `BackgroundCircle` receiving props for radius and stroke width. ES6 features such as destructuring, arrow functions, and template literals appear throughout.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/d35b06977ea8400dad3866b03ffe880f?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}