Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Margin Convention

Public visualization

Viewing a saved revision (read-only)

b0f24a4b05824a15a61552fb0414fce5

Margin Convention

0 stars1🌍 Public
SSai Phaltankar
Last edited May 29, 2022
Created on May 29, 2022
Forked from Bar Chart

This example demonstrates the margin convention for bar charts by displaying the top 10 countries by population in 2020. The chart uses React to render SVG rectangles, with D3’s `scaleBand` for the y-axis countries and `scaleLinear` for the x-axis population values. Data is loaded via `d3.csv` from a UN population dataset. A `<g>` element applies the margin translation, showing how inner dimensions are computed from the SVG width, height, and margin object.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data.