Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

The Margin Convention

0 stars1🌍 Public
Iinnocent thomas
Last edited Oct 10, 2021
Created on Oct 10, 2021
Forked from Pathetic Bar Chart

This example demonstrates the "margin convention" in D3 by rendering the top 10 most populous countries as a simple bar chart, with visible spacing around the plot area. It uses React hooks to load and filter data from the United Nations World Population Prospects 2019 via `d3.csv`, then maps it to SVG rectangles with `scaleBand` and `scaleLinear`. The chart omits axes, drawing only the bars inside a translated `<g>` element, highlighting the margins as a foundational layout principle.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

Comments

Sign in to join the discussion.

MIT Licensed