Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

bar_char

Public visualization

Viewing a saved revision (read-only)

5da119c22f9e489598b497d3cdcae928

bar_char

0 stars1🌍 Public
TTanupat B.
Last edited Mar 19, 2022
Created on Mar 19, 2022

This example displays horizontal bars for the top five countries by projected 2020 population, using a React component that loads CSV data with D3’s `csv` utility. The bar lengths encode population values via a `scaleLinear`, while country names position each bar through a `scaleBand`. Rendering occurs as SVG `<rect>` elements, with React state managing the asynchronous data load and a temporary loading message. The chart uses dimensions of 960 by 500 pixels and defaults to a dark background from the page’s CSS.

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.