🌍 Public
Viewing a saved revision (read-only)
097f4e4f19c4472dbaf9a0fd5a07c101
Axes with React & D3
This example shows a horizontal bar chart of the top ten most populous countries for 2020, with axes rendered manually. It loads UN population data via `d3.csv` and uses React’s `useState` and `useEffect` hooks to fetch and store the data. The chart builds `d3.scaleBand` and `d3.scaleLinear` scales to position bars and gridlines, mapping tick values to SVG `<line>` and `<text>` elements. All marks—rectangles, axis lines, and labels—are rendered as SVG within React components.
AI-generated description