Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Ep. 22 | Axes with React & D3

Public visualization

Viewing a saved revision (read-only)

a13a8c4738ce42fba988ac9daa0a8f7a

Ep. 22 | Axes with React & D3

0 stars1🌍 Public
YYee Han
Last edited Dec 24, 2020
Created on Dec 23, 2020

This example shows a horizontal bar chart of the top ten countries by 2020 population, with axes drawn manually using React components and D3 scale functions. The chart loads United Nations World Population Prospects 2019 data via `d3.csv`, then uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Ticks for both axes are rendered as SVG elements, with x-axis tick marks generated by calling `xScale.ticks()`, while bars are positioned and sized through the same scales.

AI-generated description

A program that loads in some United Nations World Population Prospects 2019.