🌍 Public
Viewing a saved revision (read-only)
b2c454550133407799884d83747d6b10
The Margin Convention
This example shows a horizontal bar chart of the ten most populous countries in 2020, with each bar’s length proportional to population. The visualization uses React to render SVG rectangles inside a `<g>` element translated by a margin object, while D3’s `csv` loads and parses the UN population data. `scaleBand` maps country names to vertical positions, and `scaleLinear` scales population values to bar widths within the inner chart dimensions. The chart omits axes and labels, focusing purely on the margin convention.
AI-generated descriptionA program that loads in some data about CSS named colors using D3 utilities and uses React to render the data.