{"version":"1.0","type":"rich","title":"Rendering data with react","description":"A color visualization renders the 148 CSS named colors as horizontal stripes, sorted in the order they appear in a CSV file loaded from a GitHub gist. The example demonstrates React’s component model by mapping each row of data to a `<div>` whose background color is set from the `RGB hex value` field. D3’s `csv` utility fetches and parses the data, while React’s `useState` and `useEffect` hooks manage the asynchronous loading state, showing a “Loading…” message until the data arrives. The result is a simple, full-width gradient-like display of all named colors in SVG-less, div-based rendering.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/35e11ee225e3453eb5e523da50ce424a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}