Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of Rendering data with react

Public visualization

Viewing a saved revision (read-only)

97c71af977274d7093559f89e3e0c643

Fork of Fork of Rendering data with react

0 stars1🌍 Public
SSamirAhma
Last edited Nov 25, 2022
Created on Nov 25, 2022

This example renders a horizontal bar chart of the top 10 countries by 2020 population, loading data from a CSV file of UN population estimates. The visualization uses React with the `useState` and `useEffect` hooks to fetch and store the data via `d3.csv`, then maps over the dataset to generate SVG `<rect>` elements. Position and size are determined by `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population values, while `d3.max` computes the domain for the linear scale.

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.