Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Margin Convention Example with Bar Chart

Public visualization

Viewing a saved revision (read-only)

224a419045b84030b71e5c3716308302

Margin Convention Example with Bar Chart

0 stars1🌍 Public
AAriana
Last edited Jul 21, 2021
Created on Jul 21, 2021

The chart displays the top 10 most populous countries in 2020 as horizontal bars, with country names on the y-axis and population on the x-axis. The visualization uses a React component with React Hooks (`useState`, `useEffect`) to fetch and parse the United Nations World Population Prospects 2019 data via `d3.csv`. It applies the D3 margin convention with a `scaleBand` for the vertical axis and a `scaleLinear` for the horizontal axis, rendering SVG `<rect>` elements inside a transformed `<g>` group.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.