{"version":"1.0","type":"rich","title":"Fork of F-Fork of ICE-6: Rendering Marks and Channels with React & D3","description":"This example visualizes the top 10 most populous countries in 2019 using a horizontal bar chart rendered as SVG. The React component uses the `useState` and `useEffect` hooks to load the data from a CSV URL via `d3.csv`, then applies `d3.scaleBand` for the country categories and `d3.scaleLinear` for the population values. It renders grid lines, tick labels, and bars using React's JSX syntax within the SVG element, demonstrating a hybrid approach where React manages the marks and channels while D3 provides the scaling and data-loading utilities.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/28cfaa874816460ebf4a78f435602358?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}