{"version":"1.0","type":"rich","title":"Fork of ICE-6: Rendering Marks and Channels with React & D3","description":"This example shows a horizontal bar chart of the top 10 novelists ranked by their book counts, using React to render SVG marks and D3 scales to map data to positions. The code loads CSV data with `d3.csv`, slices it to 10 entries, and uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Blue gridlines and tick labels are generated manually via `.ticks()` and `.domain()`. React state and effects (`useState`, `useEffect`) manage asynchronous data loading and re-rendering.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/c0b3d084a4694663bcde265accc4c991?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}