{"version":"1.0","type":"rich","title":"Rendering Data with React and adding D3 Arcs","description":"This example renders CSS named colors as a pie chart, with each slice filled by its corresponding RGB hex value. Using React hooks to fetch and store data from a CSV file, the chart leverages D3’s `pie` generator to compute angles and the `arc` generator to draw SVG paths. The data source is a gist containing named colors, and the visualization updates once the asynchronous CSV load completes. While React handles the component lifecycle and rendering, D3 provides the geometric calculations, demonstrating a clean separation between data-driven layout and UI logic.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/425aaf4047a04a89bd9590945b1593fe?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}