Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

5:29 styling

Public visualization

Viewing a saved revision (read-only)

9f41bce1e4e54296961310ac257ea80f

5:29 styling

0 stars1🌍 Public
Uumgi
Last edited Feb 28, 2021
Created on Feb 28, 2021
Forked from 5:17 refactoring

This example displays a horizontal bar chart ranking the populations of ten countries using data from a UN Population CSV file. React hooks manage the data-fetching state, while D3’s `scaleBand` and `scaleLinear` map country names and population values to SVG rectangles rendered inside a React component. The visualization includes styled axes with formatted tick labels (using D3’s `format`), a labeled x-axis, and a tooltip on each bar via the SVG `<title>` element, all styled with the Poppins font.

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.