{"version":"1.0","type":"rich","title":"Loading data with React and D3","description":"This example demonstrates how to load external data with D3 utilities while managing it through React state. It fetches a CSV file of named CSS colors using `d3.csv` within a `useEffect` hook, then stores the result via the `useState` setter. The component renders either a loading message or a computed summary showing the data’s file size in kilobytes and row count, calculated using `d3.csvFormat`. The visualization is minimal, outputting text rather than graphical elements, and uses React 18 with D3 v7.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/f7cca0ac117941529041287365c4be5b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}