Skip to main content
100%

Axes with React & D3

✓ Published1🌍 Public
FFulvio Vigilante
Last edited Jul 15, 2021
Created on Jul 15, 2021

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
MIT Licensed

Similar vizzes