{"version":"1.0","type":"rich","title":"Fork of Rendering Data with React & D3","description":"This example renders a horizontal bar chart of project volumes using React and D3. The code loads a CSV file via the `d3.csv` utility, then maps the data to SVG rectangles positioned with `d3.scaleBand` and scaled with `d3.scaleLinear`. It uses React's `useState` and `useEffect` hooks to fetch and manage the data, and renders axes and marks through custom components. The chart displays, for each project, a bar whose width corresponds to its planned final volume, with hover tooltips via an HTML `<title>` element.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/7a7052c1e674475dbf1a3ff342ba11a8?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}