🌍 Public
Viewing a saved revision (read-only)
475806ff346d4d4fbc0fde73a4ac2819
Axis with react and d3
This example displays a horizontal bar chart of the top 10 countries by 2020 population, loaded from a CSV file via `d3.csv`. It combines React state management with D3 scales: `d3.scaleBand` positions country labels on the y-axis while `d3.scaleLinear` maps population values to bar widths. The SVG rendering includes axes with tick marks and labels generated from `xScale.ticks()`, with bars drawn as `<rect>` elements and a loading message shown before data arrives.
AI-generated descriptionA program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.