{"version":"1.0","type":"rich","title":"Axes with React And D3","description":"This example shows a horizontal bar chart of the top 10 most populous countries in 2020, rendered as SVG elements created by React components. It loads UN population data from a CSV file using D3’s `csv` utility, then maps that data to scales built with `scaleBand` and `scaleLinear`. Axes are drawn manually by iterating over `xScale.ticks()` and `yScale.domain()`, producing grid lines and text labels. React manages state for the asynchronous data loading, while D3 provides the quantitative and categorical scales.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/13ce8fb4e4274ef5990305a7ea63442b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}