🌍 Public
Viewing a saved revision (read-only)
3e158a653e664574aaec4f95ea3d773e
Axes with React and D3
This example shows a horizontal bar chart of the top 10 countries by 2020 population, drawn as SVG elements within a React component. It uses D3’s `scaleBand` and `scaleLinear` to map country names and population values to pixel coordinates, and generates axis ticks via `xScale.ticks()`. The data is loaded asynchronously from a CSV URL using D3’s `csv` function with a row-parsing callback, then stored in React state. The chart renders rectangles for each bar, with manually positioned text labels for both axes, demonstrating integration of D3 scales and React’s state management.
AI-generated description