{"version":"1.0","type":"rich","title":"Ep 20 Rendering Data in React","description":"This example renders the CSS Named Colours dataset as a vertical stack of horizontal color swatches, one per named color, with each swatch’s background set to its HEX code. The React component uses the `useState` and `useEffect` hooks to load the CSV via `d3.csv` from a GitHub gist, displaying a “Loading…” message until the data arrives. Once loaded, it maps over the rows to produce the colored div elements, demonstrating a simple data-driven rendering workflow with React and D3 v7.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/9e229b0a5c584108963627bf256b05d1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}