Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with D3 and React - Bar Chart

Public visualization

Viewing a saved revision (read-only)

2ef1ad38b92c491d86ce8c88dcbee93e

Axes with D3 and React - Bar Chart

0 stars1🌍 Public
AAriana
Last edited Jul 21, 2021
Created on Jul 21, 2021

This bar chart displays the top 10 most populous countries in 2020 using D3 scales and React components. The code loads United Nations population data via `d3.csv`, slices the dataset, and renders SVG rectangles with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes are manually drawn by mapping tick values from `xScale.ticks()` and `yScale.domain()`, with React handling state through `useState` and `useEffect`. The visualization demonstrates combining D3’s data-driven utilities with React’s declarative rendering for interactive web graphics.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.