{"version":"1.0","type":"rich","title":"Rendering Data with React & D3","description":"This example shows CSS named colors as a single circular pie chart, with each color’s name as a tooltip on its corresponding arc. React (via `useState`, `useEffect`, and `ReactDOM.render`) manages the loading state and SVG rendering, while D3’s `csv`, `pie`, and `arc` utilities fetch the dataset and compute the arc paths. A `<clipPath>` with a circle clips the chart into a ring shape, and the code uses `d.data['RGB hex value']` for fills and `d.data['Keyword']` for IDs and titles.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/93f4c53c8c7f4fc78c0e6743284ff77b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}