Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Barchart population

Public visualization

Viewing a saved revision (read-only)

baca45f6410d45fdadb150543d6d2d24

Barchart population

0 stars1🌍 Public
SSamuele Greco
Last edited Feb 4, 2022
Created on Feb 4, 2022

This example visualizes the top 10 most populous countries in 2020 using a horizontal bar chart, with bar lengths proportional to each country's population. The visualization loads UN population data from a CSV file via `d3.csv` and renders the bars as SVG rectangles. React manages the component state and rendering, while D3’s `scaleBand` and `scaleLinear` map country names to vertical positions and population values to bar widths. The code initially displays a loading placeholder until the data arrives asynchronously.

AI-generated description

load data with d3 and use react for visualization

data about named colors