Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

Viewing a saved revision (read-only)

a85fc1389f1941568a63e0d59884a24c

The Margin Convention

0 stars1🌍 Public
OOleg Zhernovoy
Last edited Nov 27, 2022
Created on Nov 27, 2022

This example visualizes the top 10 most populous countries in 2020 as a horizontal bar chart using React and D3. The data, loaded via `d3.csv` from a UN population dataset, is rendered as SVG rectangles whose widths encode population values. A `scaleBand` positions countries along the y-axis, while a `scaleLinear` maps population to pixel widths. The chart demonstrates the margin convention by offsetting the render group with `transform` and calculating `innerHeight` and `innerWidth` from fixed margins.

AI-generated description

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