Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Loading Data with React + D3

Public visualization

Viewing a saved revision (read-only)

46e7b12976eb4fe48e63d20de1c95573

Loading Data with React + D3

0 stars0🌍 Public
NNenad Jovanovic
Last edited Oct 23, 2023
Created on Oct 19, 2023

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG. It demonstrates loading CSV data with `d3.csv` and managing the asynchronous result through React’s `useState` and `useEffect` hooks. The chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with `max` calculating the domain. A loading state is displayed until the data arrives from the provided UN Population CSV URL.

AI-generated description

program that loads in some data about css colors using d3 utilities and uses React state to keep track of data