{"version":"1.0","type":"rich","title":"Axes with React & D3","description":"This example shows a horizontal bar chart of the top 10 countries by population in 2020, rendered as SVG elements. React manages the chart's state, fetching and parsing the United Nations population CSV data with D3's `csv` utility. D3's `scaleLinear` and `scaleBand` map the data to x- and y-axis positions, while `xScale.ticks()` generates gridlines and labels. The axes, tick marks, and bars are all React-generated `<rect>` and `<text>` elements within an `<svg>` container.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a0de86d21d214c79a68a7ffc19641f80?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}