Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

The Margin Convention

0 stars1🌍 Public
GGul Jamal Zim
Last edited Jun 9, 2021
Created on Jun 9, 2021

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 description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

Comments

Sign in to join the discussion.

MIT Licensed