Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

Viewing a saved revision (read-only)

576acfbeddd5415da457d434a5f84433

The Margin Convention

0 stars1🌍 Public
JJadeJOy
Last edited Mar 26, 2021
Created on Mar 26, 2021

This example demonstrates the importance of chart margins by rendering the top 10 most populous countries as a pathetic bar chart with no axes. The bars are drawn directly against the SVG edges, making the lack of scales and labels immediately apparent. The code uses React hooks to load data from the United Nations World Population Prospects 2019 via `d3.csv`, then maps that data with `d3.scaleBand` and `d3.scaleLinear` to position rectangles. A `<g>` transform applies the margin offsets, while `d3.max` computes the domain for the x-axis scale.

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.