{"version":"1.0","type":"rich","title":"Rendering Data with React","description":"A donut chart displays the frequency distribution of CSS named colors, with each slice representing a single color from a CSV dataset loaded via `d3.csv`. The React `useState` and `useEffect` hooks manage asynchronous data loading, while `d3.pie` and `d3.arc` compute the slice geometry and render SVG paths. The visualization demonstrates how React components can declaratively render D3-generated data, with `ReactDOM.render` mounting the chart into the DOM and the SVG `fill` attribute set to each color's hex value.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/bf7f647c749f410a89f5b0fe93698884?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}