Skip to main content
๐ŸŒ Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

The Margin Convention

0 stars1๐ŸŒ Public
Jjbruzzo
Last edited Jun 30, 2022
Created on Jun 30, 2022
Forked from UN population 2019

This example demonstrates the Margin Convention for bar charts, showing the top ten countries by 2020 population as horizontal bars. It loads data from a CSV file using `d3.csv`, then uses React state and the `useEffect` hook to fetch and store the data. The chart is rendered as SVG, with `d3.scaleBand` mapping countries to the y-axis and `d3.scaleLinear` mapping population to the x-axis. A margin object defines padding, and the inner chart area is translated accordingly using an SVG `<g>` transform.

AI-generated description

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

Comments

Sign in to join the discussion.

MIT Licensed