Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

UN Population: Rendering Data with React & D3

Public visualization

Viewing a saved revision (read-only)

64557ebccf384ce98f5e90747d0ba8c2

UN Population: Rendering Data with React & D3

0 stars1🌍 Public
Jjwesterlund412
Last edited Jan 8, 2022
Created on Jan 8, 2022

This example displays UN population data for the top 10 countries in 2020 as horizontal bars rendered in SVG via React. It loads the dataset using `d3.csv`, then uses React’s `useState` and `useEffect` to fetch and store the data. D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel positions and widths, while React maps the data array to `<rect>` elements. The visualization demonstrates a hybrid approach where D3 handles data loading and scaling, and React manages the DOM rendering.

AI-generated description

A program that loads in some data about CSS named colors using D3 utitlities, and uses React state to render the data.