{"version":"1.0","type":"rich","title":"Axes with React and D3","description":"This example shows a horizontal bar chart of UN population data for 2020, displaying the top ten countries by population. The visualization uses React state to manage the loaded dataset and renders SVG elements through React components. The code leverages D3 utilities `csv` for data loading, `scaleBand` and `scaleLinear` for scaling, and `max` for domain calculation. Axes are drawn manually with SVG `line` and `text` elements positioned using scale outputs. The chart appears after a brief loading state, with bars, x-axis ticks, and y-axis country labels rendered from the fetched CSV.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a154e9ec36134b1cbce107914104063d?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}