Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Making a bar chart of UN Population Data with React & D3 - JAT

Public visualization

Making a bar chart of UN Population Data with React & D3 - JAT

0 stars1🌍 Public
JJason Tiller
Last edited Mar 5, 2021
Created on Mar 5, 2021

This example displays the top ten countries by 2020 UN population estimates as horizontal bars, with country names on the y-axis and population on the x-axis. The code loads CSV data via D3’s `csv` function, converts population values with a row accessor, and uses React state to trigger rendering. It measures scales with `d3.scaleBand` and `d3.scaleLinear`, then outputs SVG `<rect>` elements directly from JSX. The D3 v6 and React 17 setup uses hooks like `useState` and `useEffect` for asynchronous data fetching and updates.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities and uses React state to render the data as a radial burst.

Comments

Sign in to join the discussion.

MIT Licensed