Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Loading Data with React & D3

Public visualization

Viewing a saved revision (read-only)

f4b5292a926a4e2590f1e57bfc04c0fb

Fork of Loading Data with React & D3

0 stars0🌍 Public
Ssultanmirzapydev
Last edited Aug 11, 2021
Created on Aug 11, 2021

This example displays a horizontal bar chart of the ten most populous countries for the year 2000, using data fetched from a remote CSV file hosted on GitHub. React's `useState` and `useEffect` hooks manage the asynchronous data loading, showing a "Loading" message until the data arrives. The bars render as SVG `<rect>` elements, with positions and lengths scaled using D3's `scaleBand` and `scaleLinear` functions from `d3`. The visualization demonstrates the integration of React for state management and D3 for data-driven scaling.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.