Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

The Margin Convention

0 stars1🌍 Public
SSarah Elkeurti
Last edited Apr 6, 2022
Created on Apr 6, 2022

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top 10 countries by 2020 population from UN data. The chart uses SVG rectangles positioned with `scaleBand` and `scaleLinear` scales, nested inside a translated `<g>` group to offset the visualization from the SVG edges. React hooks like `useState` and `useEffect` manage asynchronous data loading via `d3.csv`, while the margin object explicitly defines padding for the plot area.

AI-generated description

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

Comments

Sign in to join the discussion.

MIT Licensed