Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with React & D3

Public visualization

Viewing a saved revision (read-only)

10af4fad1f5548cd9206e547125dca0b

Axes with React & D3

0 stars1🌍 Public
Yyejichun@naver.com
Last edited Dec 20, 2021
Created on Dec 20, 2021

This example renders a horizontal bar chart of the top 10 countries by 2020 population using React and D3. It shows CSS-loaded data from a CSV file, with axes drawn manually. The code uses D3’s `scaleBand`, `scaleLinear`, and `csv` to fetch and scale data, while React’s `useState` and `useEffect` manage loading and state. SVG elements are generated in JSX, with tick marks and labels positioned via D3’s `ticks()` and the scales’ range.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to render the data.