Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with React & D3

Public visualization

Axes with React & D3

0 stars1🌍 Public
KKenneth Silvere
Last edited Jun 20, 2021
Created on Jun 20, 2021

A React application renders a horizontal bar chart of the top ten countries by estimated 2020 population, using the UN Population 2019 dataset loaded via `d3.csv`. The code employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with custom axes built from `xScale.ticks()`. SVG elements—`rect`, `line`, and `text`—are generated directly in JSX, while React’s `useState` and `useEffect` manage asynchronous data loading and display a loading message until the CSV resolves.

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