Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

The Margin Convention

Public visualization

Viewing a saved revision (read-only)

2005365ccad84262b48781d7ad87fc02

The Margin Convention

0 stars1🌍 Public
Sstephanie0215
Last edited Sep 29, 2022
Created on Sep 29, 2022
Forked from Pathetic Bar chart

This example demonstrates the margin convention in data visualization by rendering a bar chart of population data for the top 10 countries from a UN Population 2019 CSV file. The chart uses D3 v7’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis, with React state managing the asynchronous data loading via `d3.csv`. The SVG is sized to the window, and the chart is translated by fixed margin values, showing how inner plotting area dimensions are calculated from the total width and height minus margins.

AI-generated description

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