Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

MARGIN

Public visualization

Viewing a saved revision (read-only)

8fbbc146071e45ffbaa5ce173156c6b6

MARGIN

0 stars1🌍 Public
NNoelle Huchette
Last edited Jan 14, 2023
Created on Jan 14, 2023

This bar chart displays the top 10 countries by 2020 population, drawn as horizontal rectangles scaled by population. The visualization uses D3 v5 (via `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.max`) to parse the UN Population 2019 CSV data and compute the scales. React manages the chart's state with `useState` and `useEffect`, rendering the SVG elements dynamically. The margin constant (50 pixels on each side) offsets the plot area from the window edges, and the chart fills the entire browser viewport.

AI-generated description

Renders data with D3, uses react state to keep track of data