Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Loading Data with React and Data

Public visualization

Loading Data with React and Data

0 stars0🌍 Public
ZZakaria Bakkal
Last edited Nov 9, 2021
Created on Nov 7, 2021
Forked from HTML Starter

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG using React. The code loads CSV data from a GitHub gist with `d3.csv`, then uses `scaleBand` and `scaleLinear` to map countries and population values to positions and bar widths. React’s `useState` and `useEffect` manage the asynchronous data loading, with a "Loading..." fallback until data arrives. Gridlines and axis labels are generated from the scales.

AI-generated description

Follow mouse with circle

Comments

Sign in to join the discussion.

MIT Licensed