Skip to main content
100%

gapminder scatterplot live demo

✓ Published0🌍 Public
AAlan McConchie
Last edited Oct 4, 2018
Created on Oct 3, 2018

This live demo of the classic Gapminder visualization animates a scatterplot of countries over time, plotting GDP per capita against life expectancy, with circle size encoding population and color encoding region. Built with D3 v4 and rendered as SVG, it loads country data from a CSV (gapminder_avg.csv) and transitions the circles smoothly between years, highlighting how nations move across the socioeconomic landscape.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/almccon/'>almccon</a>'s block: <a href='http://bl.ocks.org/almccon/320f9ee96ea3c35206bd3eb91e4e2286'>gapminder live demo</a>

mit Licensed

Similar vizzes

Loading thumbnail…

gapminder live demo

This interactive bubble chart reproduces the classic Gapminder visualization, plotting GDP per capita against life expectancy for countries around the world. Each circle’s position encodes economic output and health outcomes, while its area represents population and its color indicates geographic region. The chart is rendered as SVG using D3 v4, with data loaded from a CSV file containing country-level metrics. Users can explore the relationship between wealth and longevity across nations, with the x-axis showing log GDP and the y-axis showing life expectancy, making regional patterns and outliers readily apparent.

AAlan McConchie
91% match
Loading thumbnail…

gapminder with highlighting

This example animates a Gapminder-style scatterplot of countries, plotting GDP per capita against life expectancy with circle size representing population and color indicating region. Hovering over a circle highlights it by turning it yellow and enlarging it via a transition, which then reverts on mouseout. Built with D3 v4, it uses `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` to map data to positions, radii, and colors, along with D3’s axis components. The visualization loads data from a CSV file and renders the interactive circles as SVG elements.

AAlan McConchie
91% match
Loading thumbnail…

gapminder demo

This visualization reproduces the classic Gapminder bubble chart, plotting countries by GDP per capita (x-axis, log scale) and life expectancy (y-axis), with each bubble’s area encoding population and its color indicating region. The chart reads data from gapminder_avg.csv and renders as SVG using D3 v4. Hovering over a bubble likely reveals the country name, though the gist’s minimal files do not include an interactive tooltip. The example demonstrates how to load CSV data and map it to positioned, sized, and colored circles with axes, using the MIT-licensed d3.v4 code from almccon.

AAlan McConchie
90% match
Loading thumbnail…

gapminder with interaction

This interactive Gapminder-style visualization animates the relationship between GDP per capita (log-scaled on the x-axis) and life expectancy (y-axis) across countries from 1960 to 2005, with circle size encoding population. Countries are colored by region using a categorical palette. A play button and year slider let users scrub through time, triggering smooth transitions of the circles as the data updates. Built with D3 v4, it renders as an SVG animation with hover tooltips that display country details. The visualization is forked from almccon's gapminder demo and color variants, adding interactivity to the classic animated scatterplot.

AAlan McConchie
89% match
Loading thumbnail…

gapminder with color

This example visualizes the classic Gapminder dataset—GDP per capita, life expectancy, and population for countries around 2004—as a scatterplot with SVG circles, using color to distinguish regions: red for East Asia & Pacific, orange for Europe & Central Asia, yellow for America, green for Middle East & North Africa, and blue for Sub-Saharan Africa. The x-axis maps log GDP, the y-axis maps life expectancy, and circle radius encodes population. The visualization is built with D3 v4 and was forked from a block by almccon.

AAlan McConchie
86% 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
85% match
Loading thumbnail…

Fork of GapMinder (CP341 Style)

This example shows a GapMinder-style visualization comparing GDP per capita and average lifespan across countries from 1800 to 2008. A scatter plot on the left displays country-level data points, while a line chart on the right traces each country’s lifespan trajectory over time, with a brushable slider and continent filter. Hovering over a point highlights its corresponding line and shows a tooltip with population, income, and life expectancy. The visualization uses D3 v6 with custom scales, SVG rendering, and animation transitions to update positions smoothly. Annotations display historical facts for specific years, such as the Spanish Flu pandemic.

Cchris.shimotake@gmail.com
84% match
Loading thumbnail…

Fork of GapMinder (CP341 Style)

This visualization presents a fork of the classic GapMinder chart, displaying country-level GDP per capita against average lifespan across time. The left panel shows a scatterplot of circles scaled by population, while the right panel traces each country’s lifespan trajectory over years. Users control the year via a slider and filter by continent through a dropdown. Built with React and D3 v6, the code uses `d3.scaleLog`, `d3.axisBottom`, and `lineGenerator` for SVG rendering. Data comes from a JSON file, with hover tooltips and historical annotations displayed via custom event handlers.

Kkaijavanzante@gmail.com
84% match