Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Rendering data with React

Public visualization

Viewing a saved revision (read-only)

ea07f9b736d54c7b8aa8715552ef5503

Fork of Rendering data with React

0 stars1🌍 Public
Kkragovic
Last edited Mar 30, 2021
Created on Mar 30, 2021

This visualization displays the populations of ten countries in a horizontal bar chart using SVG rectangles rendered by React. The chart loads UN Population data for 2019 from a CSV file using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to fetch and store the top ten rows. The bar widths are scaled with D3’s `scaleLinear`, while the vertical positions use `scaleBand` on country names. The rendering maps over the data with React’s `map` function to create each `<rect>` element.

AI-generated description

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