Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

bar_char

Public visualization

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.

Comments

Sign in to join the discussion.

MIT Licensed