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

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.

Comments

Sign in to join the discussion.

MIT Licensed