{"version":"1.0","type":"rich","title":"Loading Data for Visualisation with d3 & React","description":"This example demonstrates a pie chart of CSS named colors, where each slice is a distinct color fetched from a remote CSV file. The code combines React’s `useState` and `useEffect` hooks to load the data asynchronously, displaying a loading message until the CSV arrives. Using D3’s `csv` parser and `arc` generator, it renders each color as an SVG path inside a `<g>` element centered on the canvas. The visualization highlights the seamless integration of D3 utilities with React state management for data-driven SVG rendering.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/7cda69b58b1a493ab2f9e3be00ff684b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}