Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of Fork of Fork of Rendering Data With REACT

Public visualization

Viewing a saved revision (read-only)

d484a9d179374f13bc75f8f551c8768a

Fork of Fork of Fork of Fork of Rendering Data With REACT

0 stars1🌍 Public
Nnkarinti
Last edited Jul 3, 2023
Created on Jun 30, 2023

This example displays a horizontal bar chart comparing the 2020 populations of the top ten countries from a UN population dataset loaded via `d3.csv`. The visualization uses React state to store the parsed data, and renders SVG elements dynamically. D3’s `scaleBand` and `scaleLinear` position bars and axis ticks, while React’s `useEffect`, `useState`, and `useCallback` manage data fetching and component updates. Axes and gridlines are generated using `xScale.ticks()`, with text labels for both countries and population values.

AI-generated description

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