{"version":"1.0","type":"rich","title":"Axes with React & D3","description":"This example shows a horizontal bar chart of the top ten countries by 2020 population, with axes rendered manually using React components. The code loads UN population data via `d3.csv`, maps it with a custom row function, and uses `scaleBand` for the y-axis (countries) and `scaleLinear` for the x-axis (population). Tick marks and labels are generated with `xScale.ticks()`, while bars are drawn as SVG `<rect>` elements. The chart updates reactively through `useState` and `useEffect` hooks, with D3 v7 providing scales and data parsing.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/35e593a439a9445795d53f24085afd3f?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}