{"version":"1.0","type":"rich","title":"Rendering data with React & D3","description":"This example shows a color field of CSS named colors rendered as stacked horizontal bars, each bar’s background set to its corresponding hex value from a CSV dataset. Built with React and D3, it loads the data via D3’s `csv` function, stores it in React state, and maps each row to a `<div>` element. The code uses React’s `useState`, `useEffect`, and `useCallback` hooks, along with `ReactDOM.render` from React 16.9 and D3 v7.3, creating a simple data-driven visualization where each color occupies a 960-pixel-wide strip.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/fd14e2661dc24469b4ef1a000c2f0079?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}