Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of Loading Data with React & D3

Public visualization

Viewing a saved revision (read-only)

10fe0e8eda7643e3b45ef5609298cad4

Fork of Fork of Loading Data with React & D3

0 stars0🌍 Public
Zzyniax
Last edited Apr 7, 2021
Created on Apr 7, 2021

This example displays a horizontal bar chart of UN population data for 2019, using React state to manage the asynchronous loading of CSV data via D3’s `csv` utility. The bars are rendered as SVG `<rect>` elements whose widths map to population values through `d3.scaleLinear`, while country names are positioned using `d3.scaleBand`. The visualization shows a loading message until the data arrives, then renders the chart with a fixed size of 960×500 pixels. D3 v5 and React 16.9 are loaded via CDN, and the data is fetched from a gist hosted by Curran Kelleher.

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.