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)

345555b876b14ebc8783d4ebe07dfb1c

Fork of Loading Data with React & D3

0 stars1🌍 Public
AAlex Gomes
Last edited Mar 1, 2022
Created on Mar 1, 2022

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, based on UN population data loaded from a CSV file. The visualization uses React state to manage the asynchronous data loading, with the `useEffect` hook triggering a D3 `csv` request. The chart renders SVG rectangles whose widths are scaled by population using `scaleLinear`, while country names are positioned along the y-axis with `scaleBand`. The code demonstrates integrating D3 utilities for data fetching and scaling within a React component architecture.

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.