🌍 Public
Viewing a saved revision (read-only)
3abd788701454ef68e826dbc424d049d
The Margin Convention
This example demonstrates the Margin Convention by rendering a bar chart of the top 10 most populous countries from UN population data. It loads CSV data with `d3.csv`, then uses `scaleBand` and `scaleLinear` to position and size rectangles within an SVG, with a grouped `<g>` element applying the margin offsets. React manages state and rendering. The chart shows horizontal bars whose widths correspond to each country’s 2020 population, with the margin ensuring axes and labels remain inside the viewport.
AI-generated descriptionA program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!