{"version":"1.0","type":"rich","title":"Axes with React and D3","description":"This example shows a horizontal bar chart of the top 10 countries by population, using React to manage the loading state and D3 utilities for data parsing and scale construction. The code loads UN population data from a CSV file via `d3.csv`, converts the population column to numbers, and slices the first ten rows. React's `useState` and `useEffect` hooks handle asynchronous data fetching, while D3's `scaleBand` and `scaleLinear` position bars and ticks. The SVG output renders custom axis lines and labels manually, without using `d3.axis`.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/10b740b102664eb5aa93b111ce359da1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}