Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bar Chart - Margin Convention

Public visualization

Bar Chart - Margin Convention

0 stars1🌍 Public
BBen Brophy
Last edited Dec 30, 2021
Created on Dec 30, 2021

A bar chart displays the top 10 countries by 2020 population from a UN dataset, with horizontal bars scaled by population count. The React component loads CSV data via D3’s `csv` method, then uses `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. SVG rectangles are rendered inside a translated group element that applies the margin convention, with dimensions calculated from fixed `width`, `height`, and `margin` objects. The chart updates after asynchronous data loading, showing a loading state initially.

AI-generated description

Use D3 utilities and React

Comments

Sign in to join the discussion.

MIT Licensed