Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bar Chart with React & D3

Public visualization

Viewing a saved revision (read-only)

9ee17f380d6e47f6b9c084f45bad3f04

Bar Chart with React & D3

0 stars1🌍 Public
SSarah Elkeurti
Last edited Apr 9, 2022
Created on Apr 6, 2022

This visualization displays the ten most populous countries in 2020 as a horizontal bar chart, where bar length encodes population size. The code uses React hooks (useState, useEffect, useCallback) to manage asynchronous data loading via d3.csv, which fetches UN population data from a GitHub gist. D3 scales (scaleBand for countries, scaleLinear for population totals) position the SVG rectangles rendered as React components. While the HTML loads React and D3 from CDNs, the visible chart omits axes, labels, and color, showing only raw bars against a white background.

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.