Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Visualising UN Data With React & D3

Public visualization

Viewing a saved revision (read-only)

338178dba6bc4392b320a2d9083e9ff3

Visualising UN Data With React & D3

0 stars1🌍 Public
JJames Rhodes
Last edited Feb 19, 2022
Created on Feb 13, 2022

This example shows a horizontal bar chart comparing population figures for the top 10 countries in 2020, using UN population data loaded as CSV. The visualization renders as SVG, with React managing the component state and D3 v7 handling data loading and scales. Key APIs include `csv`, `scaleBand`, and `scaleLinear` for positioning bars and ticks, while React’s `useState` and `useEffect` manage the asynchronous data retrieval. The chart displays country names on the y-axis and population values on the x-axis, with axis ticks and labels generated manually.

AI-generated description

Example of visualising data using React and D3

data MDN: CSS Colors