{"version":"1.0","type":"rich","title":"Axes with React & D3","description":"This example shows a horizontal bar chart of the top 10 most populous countries in 2020, with labeled axes and tick marks, rendered as SVG. The visualization combines React for component state and rendering with D3 utilities like `scaleBand`, `scaleLinear`, and `csv` for data loading. React’s `useState` and `useEffect` hooks fetch the UN population CSV data, while the `xScale` and `yScale` functions position the bars and axis labels within configured margins. Tick marks and text are generated manually from `xScale.ticks()` and `yScale.domain()`.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b7d6f88273484e929395025f1f3cf7df?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}