{"version":"1.0","type":"rich","title":"Rendering data with react","description":"This example displays CSS named colors as horizontal bars stacked vertically, with each bar’s background color set to its corresponding RGB hex value from the loaded dataset. It uses React hooks (`useState`, `useEffect`) to fetch and store the data via D3’s `csv` utility, then conditionally renders a “Loading...” message until the data arrives. ReactDOM mounts the `App` component, which maps over the CSV rows to produce the colored divs, demonstrating a simple data-driven rendering pipeline with React and D3.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a5176f7e1856481693d13f597a7de96f?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}