{"version":"1.0","type":"rich","title":"Loading Data with React and D3","description":"A CSS color dataset loads from a remote CSV file via D3’s `d3.csv` and is rendered as a full-circle pie chart using `d3.pie` and `d3.arc` within a React component built with `useState` and `useEffect`. Each slice is drawn as an SVG `<path>` in React, with its fill derived directly from the row’s `RGB hex value` column. The example displays the raw data as a pie without aggregating values, using `value(1)` to assign equal weight to each row. A temporary \"Loading...\" message appears until the CSV arrives, and the chart renders with a fixed 960×500 viewBox centered in the SVG.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/812df9d3593b4bbcbd3c4222d6966436?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}