Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with React & D3

Public visualization

Viewing a saved revision (read-only)

9c162efad78a482aaf021b6a2a3e36d7

Axes with React & D3

0 stars1🌍 Public
TThiago Sawada
Last edited Mar 2, 2023
Created on Apr 15, 2021

A React and D3 bar chart displays the top 10 most populous countries using UN population data from 2019, with bars representing 2020 projections. The visualization includes custom axes built manually through React components, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. D3's `csv` loader fetches the dataset, while tick marks are generated via `xScale.ticks()`. The SVG rendering maps each country's population to bar widths, with axis labels positioned using React's JSX syntax.

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.