{"version":"1.0","type":"rich","title":"Loading Color Data and Rendering it with React","description":"This example loads a CSS named color dataset from a GitHub gist using the `d3.csv` function, then renders each color as a horizontal bar with React. The application uses React hooks (`useState` and `useEffect`) to fetch and store the data asynchronously, displaying a “Loading” message before the bars appear. Each bar’s background color is set to the `RGB hex value` field, and the bars are stacked vertically at a fixed width of 960 pixels. This demonstrates a simple data-driven visualization where D3 handles CSV parsing and React manages the component state and rendering.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/d926f0ae2c334b0a833a46e18723ae50?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}