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)

f67c9d9e771b49da996f2e762c8c2b8c

Fork of Rendering Data with React

0 stars1🌍 Public
KKazushige Okuma
Last edited Oct 20, 2021
Created on Oct 20, 2021

This example visualizes the top 10 countries by 2020 population as horizontal bars, using React state to manage the loaded data and render each rectangle as an SVG element. The chart loads CSV data from a GitHub gist using `d3.csv`, parses the population column, and applies `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis to position and size the bars. The React hooks `useState` and `useEffect` handle the asynchronous data fetch, while `d3.max` determines the scale domain.

AI-generated description

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