Skip to main content
SimilarExport ZIP
100%

Gapminder Total Pop v Income per Cap Slider test

✓ Published0🌍 Public
Llakalia@wpi.edu
Last edited Oct 31, 2020
Created on Oct 31, 2020

This interactive scatterplot displays total population versus income per capita for countries from 1950 to 2015, based on Gapminder data summarized from a CSV file. A slider filters the dataset by year, updating the displayed points. The visualization uses React with D3 v5 scales and SVG rendering for axes and circles, with tooltips showing country names via the SVG `title` element.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Gapminder Data in React and D3 - 1 menu

This scatterplot displays Gapminder country-level data from 1950 onward, plotting year on the x-axis and one of four selectable attributes (income per capita, total population, life expectancy, or fertility rate) on the y-axis. Each circle represents a country, with its color fixed and a native SVG `<title>` tooltip revealing the country name. Built with React and D3 v5, it uses `scaleLinear` axes, `csv` loading, and `format` for tick labels, while a `react-dropdown` menu updates the y-axis attribute via React state.

Llakalia@wpi.edu
80% match
Loading thumbnail…

Gapminder Population Growth in React and D3

This visualization displays Gapminder population growth data, plotting each country as a circle on a scatterplot with year on the x-axis and total population on the y-axis. Values are formatted with a custom tick formatter that shortens large numbers (e.g., replacing 'G' with 'B'). The React app uses D3 v5 scales (`scaleLinear`, `scaleOrdinal`) and `d3.csv` for data loading. SVG rendering is used throughout, with React components for axes and marks. Tooltips show country names via SVG `<title>` elements.

Llakalia@wpi.edu
78% match
Loading thumbnail…

Gapminder Data in React and D3 - interactive regions

This interactive Gapminder visualization, built with React and D3, maps country-level indicators like income per capita, life expectancy, and fertility rate over time (1950-2015). Users can switch axes, scrub through years with a slider, and hover or click the color legend to highlight or select world bank regions. The map background uses `geoNaturalEarth1` and `geoPath` from D3, while SVG circles are scaled with `scaleSqrt` and colored via `scaleOrdinal`. Data is fetched from a Gapminder summary CSV.

Llakalia@wpi.edu
77% match
Loading thumbnail…

Gapminder Clone

This interactive visualization recreates the classic Gapminder chart, plotting GDP per capita against life expectancy for countries over time from 1800 to 2014. Users can filter by continent via a custom dropdown menu and animate the progression through years with a play button. The code uses D3 v7 scales, axes, and transitions for the SVG rendering, with a tooltip displaying country details on hover. Data is loaded as JSON from an external GitHub source, and a custom dropdown module handles the continent selection.

AAdan Rodriguez
76% match
Loading thumbnail…

Gapminder Data in React and D3 - colored world map rebuilt with interactions

This interactive Gapminder visualization combines a world map with an animated scatterplot to explore country-level data from 1950 onward. Users select a y-axis attribute (income, population, life expectancy, or fertility) via a dropdown, while the map colors countries by World Bank region using a d3.scaleOrdinal. Hovering over the color legend filters both the map and scatterplot to highlight matching countries. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the map, d3.scaleLinear for axes, and React state to manage selections, with data loaded via d3.csv and topojson.

Llakalia@wpi.edu
76% match
Loading thumbnail…

Gapminder Data in React and D3 - rotated menu

This example displays Hans Rosling's Gapminder dataset as an animated scatterplot in SVG, plotting annual data from 1950 with country points colored teal. A rotated dropdown menu lets users select which attribute appears on the y-axis, including income per capita, total population, life expectancy, or fertility rate, while the x-axis represents years. Using React's `useState` hook and D3's `scaleLinear`, `extent`, and `csv` data loading, the visualization renders axes and marks via custom SVG components. The React dropdown library provides the interactive control, and the code filters out rows with zero values.

Llakalia@wpi.edu
75% match
Loading thumbnail…

test changes Gapminder Data in React and D3 - interactive regions

Gapminder country data from 1950 to 2015 is plotted as an interactive scatterplot, with a year slider when time is on the x-axis, and dropdowns to select different economic and demographic attributes. A world map background, rendered with `d3.geoNaturalEarth1` and `d3.geoPath`, colors countries by World Bank region, with click-to-select and hover highlighting that filters the plotted circles. Built with React and D3 v5, using `scaleLinear`, `scaleOrdinal`, and `scaleSqrt` for scales, and SVG elements for axes, legend, and marks.

Llakalia@wpi.edu
75% match
Loading thumbnail…

Gapminder Data in React and D3 - worldmap colored

This visualization displays historical Gapminder country data—including income, population, life expectancy, and fertility—on a world map colored by World Bank region, with a scatterplot overlay showing data over time. The React app uses D3 v5 scales (scaleLinear, scaleOrdinal) and geoNaturalEarth1 projection with geoPath to render the atlas, while the dropdown menu switches the y-axis metric. Data is loaded via d3.csv from a Gapminder summary, and country colors are matched via a lookup table.

Llakalia@wpi.edu
75% match