Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React

Public visualization

Viewing a saved revision (read-only)

857420774f594da9baf0d1f5aec395bb

Rendering Data with React

0 stars2🌍 Public
Bbakstorage00001
Last edited Feb 3, 2022
Created on Feb 3, 2022

This example visualizes the top 10 countries by 2020 population as a horizontal bar chart rendered with SVG. The code loads UN population data from a CSV file using `d3.csv`, processes the rows, and stores the result in React state via the `useState` and `useEffect` hooks. D3’s `scaleBand` and `scaleLinear` position the bars, while React maps the data to `<rect>` elements. A loading message displays until the data arrives, with the chart updating once React state is set.

AI-generated description

A program that loads in some data using d3 utilities, and uses React state to keep track of the data.