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)

7ae76324cab648b5a5d2a31d9e4f855f

Axes with React and D3

0 stars1🌍 Public
DDavid Kim
Last edited Apr 28, 2022
Created on Apr 25, 2022

This example shows a horizontal bar chart of population data for the top 10 countries, with axes rendered using D3 scales and React components. It loads data from a CSV file and uses `d3.csv`, `scaleBand`, and `scaleLinear` to map countries and populations to screen coordinates. React's `useState` and `useEffect` manage the loading state, while SVG elements are generated directly within the React component, mixing D3's axis ticks and gridlines with React-rendered `<rect>` bars.

AI-generated description

Use React to render data

A program that loads in some data about CSS named colors