{"version":"1.0","type":"rich","title":"[SR] Rendering Data with React","description":"This example displays a dataset of CSS named colors as a vertical stack of horizontal color bars, one row per color. The React app fetches a CSV file from a GitHub gist using `d3.csv`, stores it in component state with `useState` and `useEffect`, then maps over the data to render divs with inline styles setting each row’s background color from the `'RGB hex value'` column. A separate `Message.js` module computes summary statistics (file size, row and column counts) via `d3.csvFormat`. The visualization uses React 16.9 and D3 v6, outputting SVG-like blocks in a full-viewport layout.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/63da100d163341f1a7aa3b28ead41c24?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}