Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

Viewing a saved revision (read-only)

85ee55c4217743658b43924a771d8d51

The Margin Convention

0 stars1🌍 Public
MMadNietzsche
Last edited Jul 29, 2021
Created on Jul 29, 2021
Forked from Pathetic Bar Chart

This example visualizes the top 10 countries by population in 2020 as horizontal bars. The chart uses the margin convention, arranging a 960 by 500 pixel SVG with a 20-pixel margin on each side. The code loads data from a CSV file using D3's `csv` utility, and then uses React state to manage the data asynchronously. Key D3 APIs include `scaleBand` for the categorical country axis, `scaleLinear` for the population axis, and `max` to compute the domain, with bars rendered as SVG `rect` elements within a transformed group.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state as a Radar Burst