{"version":"1.0","type":"rich","title":"Axes with React and D3","description":"This example shows a horizontal bar chart of population data for the top 10 countries, with axes rendered using D3 scales and React components. It loads data from a CSV file and uses `d3.csv`, `scaleBand`, and `scaleLinear` to map countries and populations to screen coordinates. React's `useState` and `useEffect` manage the loading state, while SVG elements are generated directly within the React component, mixing D3's axis ticks and gridlines with React-rendered `<rect>` bars.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b414e011ab684a348de024920a522649?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}