Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with React & D3

Public visualization

Viewing a saved revision (read-only)

1f7e82be5b674ab583ccf7274410c65a

Axes with React & D3

0 stars1🌍 Public
Ccoltonjcox92
Last edited Jan 30, 2022
Created on Jan 28, 2022

This example shows the top 10 most populous countries as a horizontal bar chart. React manages the component state and SVG rendering, while D3 provides the scales and data loading. The chart maps country names to a `scaleBand` for the y-axis and population values to a `scaleLinear` for the x-axis. Ticks for both axes are manually generated using `xScale.ticks()` and the domain of the y-scale, with population data sourced from the United Nations World Population Prospects 2019 CSV via `d3.csv`.

AI-generated description

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

Data: United Nations World Population Prospects 2019.