Skip to main content
๐ŸŒ Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

The Margin Convention

0 stars1๐ŸŒ Public
MMichael Bergerson
Last edited Dec 27, 2020
Created on Dec 27, 2020
Forked from Pathetic Bar Chart

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top 10 most populous countries from UN population data. React manages the component state, fetching the CSV via `d3.csv` and storing the parsed data. The chart uses `scaleBand` for the y-axis country categories and `scaleLinear` for the x-axis population values, with bars drawn as SVG `rect` elements inside a translated group to respect the margin. The visualization shows how margins create space for potential axes while keeping the plot area clean.

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