Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

bar_char

Public visualization

Viewing a saved revision (read-only)

17cc11afee724a52940bc514eb08cc89

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.