{"version":"1.0","type":"rich","title":"12. Rendering Data with React","description":"This example displays a horizontal stacked bar chart of CSS named colors, with each row’s height fixed and its width spanning the full 960 pixels while the background color is set to the corresponding RGB hex value. The visualization loads the CSS color dataset from a remote CSV file using D3’s `csv` utility, then React’s `useEffect` and `useState` manage the asynchronous data fetching and rendering. The React app maps over each data row to produce a styled `div` element for each color, while the initial state shows a “Loading…” message before the data arrives.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/29f764b2788f45f1aeec4223c0960629?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}