🌍 Public
Viewing a saved revision (read-only)
f2a5b4f91df24772ac0efe6df24d97a0
Dataviz 2020_Ep22 - 15. The Margin Convention (with React and D3) (BarChart Vertical Ver.)
MMinwoo Pak
Last edited Jul 13, 2021
Created on Jul 12, 2021
A vertical bar chart displays the ten most populous countries in 2020 from a UN population CSV loaded with `d3.csv`. React renders SVG rectangles, while D3's `scaleBand` and `scaleLinear` map country names and population values to pixel coordinates. The chart applies the margin convention by translating a `<g>` element via `transform`, separating the plotting area from the viewport. Data loading occurs in a `useEffect` hook, and the visualization updates once the asynchronous CSV fetch resolves.
AI-generated descriptionA program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data.