{"version":"1.0","type":"rich","title":"Click to Shuffle:: Rendering Data with React & D3","description":"This example renders CSS named colors from a CSV dataset as a radial burst of pie slices, where each slice’s fill corresponds to its RGB hex value. Clicking anywhere on the page shuffles the order of the slices, recalculating the pie layout with `d3.pie` and drawing paths with `d3.arc`. The visualization uses React hooks (`useState`, `useEffect`) to manage the data and trigger updates, while D3’s `csv` loader fetches the color data. The SVG output is generated entirely through React components, demonstrating a hybrid of React state management and D3’s data transformation utilities.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/0e29c2b9d9664d62a6827f5721437297?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}