Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axis with React & D3

Public visualization

Viewing a saved revision (read-only)

bcd98de6d49247078dc0263f05ca2232

Axis with React & D3

0 stars1🌍 Public
TTakashi-KK
Last edited Sep 11, 2022
Created on Sep 11, 2022

This example shows a horizontal bar chart ranking the ten most populous countries in 2021, with labeled axes for population counts and country names. It loads UN population data from a CSV file using D3’s `csv` utility, then passes the parsed data to React state. React renders the SVG, while D3’s `scaleBand` and `scaleLinear` position bars and ticks, and `xScale.ticks()` generates gridline labels. The chart is fully SVG-based, with a margin group translating the plot area.

AI-generated description

A program that loads in some data about MDN CSS Colors using D3 utilities, and uses React to render the data as a radial burst!