🌍 Public
Viewing a saved revision (read-only)
f842d1fc7a274d28a961393a1ea9a90e
Axes with React and D3
This example shows a horizontal bar chart of the top 10 countries by population, using React to manage the loading state and D3 utilities for data parsing and scale construction. The code loads UN population data from a CSV file via `d3.csv`, converts the population column to numbers, and slices the first ten rows. React's `useState` and `useEffect` hooks handle asynchronous data fetching, while D3's `scaleBand` and `scaleLinear` position bars and ticks. The SVG output renders custom axis lines and labels manually, without using `d3.axis`.
AI-generated descriptionA program that loads in some data using D3 utilities and uses React state to keep track of the data.