🌍 Public
Viewing a saved revision (read-only)
c5f8b4904816497296ec352171a79fe0
Rendering Data with React & D3
This example shows a horizontal bar chart of the top 10 countries by projected 2020 population, rendered as SVG. It demonstrates how React state manages the loaded data while D3 utilities compute the scales and ticks. The code uses `d3.csv` to fetch the UN Population 2019 dataset, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the numeric x-axis. React's `useState` and `useEffect` hooks handle the asynchronous data loading and trigger the declarative rendering of bars, axis lines, and labels.
AI-generated descriptionA program that loads in some data using D3 utilities, and uses React state to keep track of the data.