Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin convention

Public visualization

Viewing a saved revision (read-only)

4cf6b1a8a1d94f64bd1c817ec0eaa51b

The Margin convention

0 stars1🌍 Public
TtrwMK
Last edited Oct 14, 2022
Created on Oct 14, 2022

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top 20 countries by 2020 population from a UN dataset. The chart displays country names along the y-axis and population values along the x-axis, with bars colored uniformly. The code uses React hooks to load CSV data via `d3.csv`, then employs `d3.scaleBand` and `d3.scaleLinear` for scaling, while rendering SVG rectangles inside a transformed group element to accommodate the specified margins.

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!