Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Margin convention

Public visualization

Viewing a saved revision (read-only)

5dfa0f8d6fac461494a4d6ffab2a37a2

Margin convention

0 stars1🌍 Public
11tang
Last edited Apr 17, 2021
Created on Apr 11, 2021

This example displays the top 10 most populous countries as a horizontal bar chart without axes, using a fixed margin convention to inset the plot area. The chart loads data from the United Nations World Population Prospects 2019 CSV, processes it with `d3.csv`, and renders SVG rectangles scaled by population. The code uses React hooks (`useState`, `useEffect`) to fetch and filter the data, then applies `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the x-axis range, all within an SVG canvas of 960×500 pixels.

AI-generated description

A program that shows the top 10 most populous countries as a basic bar chart with no axes.

Data: United Nations World Population Prospects 2019.