Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refactoring initial Gapminder Population Growth in React and D3

Public visualization

Viewing a saved revision (read-only)

1b4ca7ed0292456b92b30518fdfb2e0c

Refactoring initial Gapminder Population Growth in React and D3

1 star0🌍 Public
Llakalia@wpi.edu
Last edited Jan 5, 2024
Created on Jan 5, 2024

This example visualizes Gapminder population growth data, plotting total population against year for each country as circles with tooltips showing country names. Built with React and D3 v5, it uses `scaleLinear` for both axes, `scaleOrdinal` for color encoding, and `format` to abbreviate population labels. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components that generate ticks, while `Marks` generates circles with D3’s `interpolateRainbow` color scheme. The data is loaded asynchronously from a CSV via `useData` and D3’s `csv` parser.

AI-generated description

Hans Rosling Population Growth data set: A visualization in React and D3.

Gapminder Population Growth (Total Population) data summary is a summary of data that was downloaded from Step 1 of How to build Animated Charts like Hans Rosling — doing it all in R and originally comes from Gapminder.com