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)

7abaa206bef44e6c897975da11b652a9

Fork of Rendering Data with React

0 stars1🌍 Public
CChris Knight
Last edited Jun 23, 2022
Created on Jun 23, 2022

This example visualizes United Nations population data for 2020 as a horizontal bar chart, showing the top 10 countries by population. The React application uses `useState` and `useEffect` to fetch the CSV data via D3's `csv` utility, then renders SVG rectangles positioned with `scaleBand` and `scaleLinear`. React and ReactDOM handle the component lifecycle and DOM rendering, while D3 provides data parsing, scaling, and maximum value calculation. The visualization updates dynamically once the asynchronous data loading completes.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst.