Skip to main content
100%

Rendering Data with React & D3

✓ Published1🌍 Public
CChristian Potdevin
Last edited Mar 27, 2021
Created on Mar 27, 2021

This example shows a horizontal bar chart of the top 10 countries by projected 2020 population, rendered as SVG. It demonstrates how React state manages the loaded data while D3 utilities compute the scales and ticks. The code uses `d3.csv` to fetch the UN Population 2019 dataset, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the numeric x-axis. React's `useState` and `useEffect` hooks handle the asynchronous data loading and trigger the declarative rendering of bars, axis lines, and labels.

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