Skip to main content
100%

gapminder demo

✓ Published0🌍 Public
AAlan McConchie
Last edited Sep 15, 2017
Created on Sep 9, 2017

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.

AI-generated description

Built with blockbuilder.org

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
94% match
Loading thumbnail…

gapminder scatterplot live demo

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.

AAlan McConchie
90% 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
89% 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
88% 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
87% 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
86% match
Loading thumbnail…

Gapminder

This visualization recreates the classic Gapminder bubble chart, plotting countries as circles on a grid of female literacy rate (x-axis) against fertility rate (y-axis). Circle area encodes population, and color maps to continent. The chart is rendered with D3 v5 using SVG, with country names from the CSV appearing in French. The data highlights global patterns, such as the clustering of high-fertility African nations at the lower right and the concentration of European and Asian countries with higher literacy and lower fertility at the upper left.

JJuanma-GP
84% match
Loading thumbnail…

Bham block 1

A scatterplot of Gapminder data shows average GDP per capita against life expectancy for each country, with circle size encoding population and color indicating the region. The visualization uses D3 v4 to load the CSV and append SVG circles, scaling positions with `d3.scaleLinear` for the x- and y-axes and determining radius from the raw population value. Country labels and axis annotations are commented out, leaving the bare plot unadorned.

CCartophile
84% match