{"version":"1.0","type":"rich","title":"Axes with React & D3","description":"This example shows a horizontal bar chart of the top 15 countries by 2020 population, with axes drawn manually using SVG elements. React state loads the CSV data via `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` map countries and population values to pixel coordinates. The x-axis ticks are generated with `xScale.ticks()` and rendered as lines with labels, and the y-axis labels align with each bar’s midpoint. All marks and axes are SVG elements produced declaratively in JSX.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/c4814e6cc5a8450785efeedcc8e8a398?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}