{"version":"1.0","type":"rich","title":"Fork of Rendering Data with React","description":"This example visualizes the top 10 countries by 2020 population as horizontal bars, using React state to manage the loaded data and render each rectangle as an SVG element. The chart loads CSV data from a GitHub gist using `d3.csv`, parses the population column, and applies `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis to position and size the bars. The React hooks `useState` and `useEffect` handle the asynchronous data fetch, while `d3.max` determines the scale domain.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/42ed9f3447a24a13b57d8d6d832358a4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}