Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with Reactsies

Public visualization

Viewing a saved revision (read-only)

a50cd1a99c0e4f9e899f3be62cc32b17

Axes with Reactsies

0 stars1🌍 Public
JJohn Patrick Banas
Last edited Sep 11, 2021
Created on Sep 10, 2021
Forked from Margin Convention

This example shows 2019 population data for ten countries as horizontal bars with SVG axes built manually. React state manages the CSV data loaded via `d3.csv`, while `scaleBand` positions countries along the y-axis and `scaleLinear` maps population values to bar widths. The code generates tick marks and labels by iterating over `xScale.ticks()` and the y-domain, drawing grid lines and text with SVG elements.

AI-generated description

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