Skip to main content
100%

Axes with React & D3

✓ Published1🌍 Public
KKolezhannochka
Last edited Jan 5, 2022
Created on Jan 5, 2022
Forked from Margin Convention

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, as loaded from a CSV file of UN population data. The visualization uses D3’s `scaleBand` and `scaleLinear` to map country names and population values to SVG coordinates, while React manages the component state and renders the chart. Axes are drawn with D3 ticks and gridlines, and the bars are `rect` elements sized by the linear scale. The data fetching and parsing are performed with D3’s `csv` method inside a React `useEffect` hook.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes