Skip to main content
100%

Axis With React and D3

✓ Published1🌍 Public
BbeauMarko
Last edited Jan 27, 2021
Created on Jan 27, 2021

This example shows a horizontal bar chart of the top 10 countries by population from the UN Population 2019 dataset. It uses React hooks like `useState` and `useEffect` to load and store the data, while d3’s `csv`, `scaleBand`, `scaleLinear`, and `max` utilities handle data parsing and scaling. React renders the SVG elements—including gridlines, ticks, and rectangles—by iterating over the scales, resulting in a fully React-managed visualization. The axis ticks are generated from the linear scale’s `ticks` method.

AI-generated description

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

MIT Licensed

Similar vizzes