Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Axes with React & D3

Public visualization

Viewing a saved revision (read-only)

7beebb647c194db0b7c5a144d995438d

Fork of Axes with React & D3

0 stars0🌍 Public
NNick Hu
Last edited Mar 6, 2022
Created on Mar 6, 2022

This example displays the top 10 most populous countries as a horizontal bar chart labeled with axes. It uses React hooks (useState, useEffect) to fetch and load CSV data from the United Nations World Population Prospects 2019, then renders bars via SVG rectangles. D3’s scaleBand and scaleLinear position the bars, while manually generated ticks and labels create the x and y axes without d3.axis. The chart updates after loading, with React managing the component state and D3 handling the data scaling and formatting.

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.