{"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, rendered with React components as SVG elements. The code loads the UN population dataset asynchronously using `d3.csv`, then uses `scaleBand` and `scaleLinear` to position bars and generate tick marks for both axes. React manages the loading state and renders the chart only after data arrives. Custom axis lines and labels are created manually from the scales' tick values, avoiding the D3 axis component altogether.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/fd952aa5ec3e433981989690e67c3ba2?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}