Skip to main content
100%

Pathetic Bar Chart

✓ Published1🌍 Public
Jjanneprice
Last edited Mar 24, 2022
Created on Mar 24, 2022

This example visualizes the ten most populous countries in 2020 as a horizontal bar chart, using bars that stretch across the screen without axes or labels. The chart loads UN population data from a CSV file via `d3.csv`, then processes each row to extract the 2020 population as a number. React’s `useState` and `useEffect` hooks manage the asynchronous data loading and component state, while D3’s `scaleBand` and `scaleLinear` position the bars along the y-axis and scale their widths. The bars are rendered as SVG `<rect>` elements using React’s declarative JSX syntax.

AI-generated description

A program that loads in some data using D3 utilities and uses React state.

MIT Licensed

Similar vizzes