🌍 Public
Viewing a saved revision (read-only)
efab3a4818894d1db60b933c035e400b
The Margin Convention
This example visualizes the top 10 countries by population in 2020 as horizontal bars. The chart uses the margin convention, arranging a 960 by 500 pixel SVG with a 20-pixel margin on each side. The code loads data from a CSV file using D3's `csv` utility, and then uses React state to manage the data asynchronously. Key D3 APIs include `scaleBand` for the categorical country axis, `scaleLinear` for the population axis, and `max` to compute the domain, with bars rendered as SVG `rect` elements within a transformed group.
AI-generated descriptionA program that loads in some data about CSS named colors using D3 utilities, and uses React state as a Radar Burst