Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with React + D3

Public visualization

Viewing a saved revision (read-only)

68c9454284084bf19e207e36e832a4be

Axes with React + D3

0 stars1🌍 Public
Rrmgoldberg24
Last edited Jan 19, 2023
Created on Jan 19, 2023

This example shows a horizontal bar chart of top-10 countries by 2020 population, using React to manage the data and render SVG axes and bars. It loads CSV data from a GitHub gist with d3.csv, stores it in React state via useState and useEffect, and builds scales with d3.scaleBand and d3.scaleLinear. Axes are drawn manually with SVG line and text elements, while d3.max computes the domain. React’s declarative rendering replaces D3’s typical join pattern for the visualization.

AI-generated description

A program that loads in data using D3 and keeps it in React state as a radial burst!