{"version":"1.0","type":"rich","title":"Axes with react and D3","description":"This example shows a horizontal bar chart of the top 10 countries by 2020 population, with custom axes rendered as SVG elements. D3 scales (scaleBand, scaleLinear) compute bar positions and sizes, while React manages state and renders ticks, labels, and rects. The code manually generates axis ticks via xScale.ticks() and maps domains, avoiding d3.axisBottom. Data loads from a CSV file using d3.csv.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/2d9efde47678493db481a72109029c89?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}