Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with React and D3

Public visualization

Viewing a saved revision (read-only)

917c434e59084ab184106ede10e12fde

Axes with React and D3

0 stars1🌍 Public
Ccynichole
Last edited Feb 18, 2022
Created on Feb 18, 2022

This example shows a horizontal bar chart of the top 10 countries by population, using React to manage the loading state and D3 utilities for data parsing and scale construction. The code loads UN population data from a CSV file via `d3.csv`, converts the population column to numbers, and slices the first ten rows. React's `useState` and `useEffect` hooks handle asynchronous data fetching, while D3's `scaleBand` and `scaleLinear` position bars and ticks. The SVG output renders custom axis lines and labels manually, without using `d3.axis`.

AI-generated description

A program that loads in some data using D3 utilities and uses React state to keep track of the data.