{"version":"1.0","type":"rich","title":"Fork of ICE-6: Rendering Marks and Channels with React & D3","description":"This example shows state sales data as a horizontal bar chart, ordered by descending sales values and rendered as SVG rectangles. The visualization combines React’s state management with D3 scales and axes, using `scaleBand` for the y-axis categories and `scaleLinear` for the x-axis values. It loads data from a CSV file via D3’s `csv` method, then constructs custom tick marks and labels for both axes. React’s `useState` and `useEffect` hooks manage the asynchronous data fetching, while the rendering loop maps each data entry to a `<rect>` element with computed width and height.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/e04b9fcb91794b81b462ba7dc35d89e1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}