Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axis with React & D3

Public visualization

Viewing a saved revision (read-only)

f18c8cf64e244212a05d17c10597fca5

Axis with React & D3

0 stars1🌍 Public
11tang
Last edited Apr 17, 2021
Created on Apr 17, 2021
Forked from Margin convention

This visualization displays the top 10 most populous countries as a horizontal bar chart, with axes rendered using React components that call D3 scales. It uses d3.csv to load population data from the United Nations World Population Prospects 2019, d3.scaleBand and d3.scaleLinear to map countries and population values, and maps over xScale.ticks() to generate gridlines and tick labels. The chart is composed of SVG elements inside a React functional component, with each rect, line, and text element created imperatively.

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.