Skip to main content
100%

Axes with React & D3

✓ Published1🌍 Public
Bbakstorage00001
Last edited Feb 3, 2022
Created on Feb 3, 2022

This example shows a horizontal bar chart of UN population data for ten countries in 2020, rendered as SVG using React and D3. The React component manages the loaded CSV data with `useState` and `useEffect`, while D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` utilities handle data loading and scaling. Axes are drawn manually by iterating over `xScale.ticks()` and the y-scale domain, with tick labels and lines positioned via transforms. The bars are `rect` elements sized by the scales within a translated group.

AI-generated description

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

MIT Licensed

Similar vizzes