{"version":"1.0","type":"rich","title":"Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3","description":"This example presents a horizontal bar chart ranking the top 10 most populous countries in 2019, loaded from a CSV file using d3.csv. The React component renders SVG marks (rectangles) whose widths and positions are scaled by d3.scaleLinear and d3.scaleBand, with custom tick labels and gridlines drawn manually. The code uses React hooks like useState and useEffect to manage asynchronous data loading, and d3.scaleLinear, d3.scaleBand, d3.max, and d3.format for scales and formatting.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/9ba2f71e5f7443e69a8b51f18ae37aa0?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}