Skip to main content
100%

Bar Chart with React & D3

✓ Published1🌍 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.

MIT Licensed

Similar vizzes