Dataviz 2020_Ep21 - 14. Bar Chart (with React and D3)
✓ Published1🌍 Public
MMinwoo Pak
Last edited Jun 12, 2021
Created on Jun 11, 2021
This example displays a horizontal bar chart of the top ten countries by 2020 population, using the UN World Population 2019 dataset. It loads the CSV via `d3.csv`, then triggers React re-renders with `useState` and `useEffect`. The chart maps country names to a `scaleBand` y-axis and population values to a `scaleLinear` x-axis, rendering each bar as an SVG `rect` with React. D3 utilities handle data loading and scaling, while React manages the component lifecycle and DOM updates.
AI-generated descriptionA program that loads in the World Population 2019 data using D3 utilities, and uses both React & D3 to render the data (as a Bar Chart).
MIT Licensed