Skip to main content
SimilarExport ZIP
100%

Gooey Exploding Scatterplot

✓ Published0🌍 Public
TThanaporn-sk
Last edited Jan 18, 2017
Created on Jan 18, 2017

This interactive Gapminder recreation plots life expectancy against fertility rates for countries over time, with a large year label and playable transitions. The “gooey” effect uses SVG filters—`feGaussianBlur`, `feColorMatrix`, and `feBlend`—to make continent groups coalesce or explode into their constituent countries with a paintball-splatter-like blur. The code creates a separate filter definition per continent, allowing individual toggling via the Explode All and Collapse All buttons. Data comes from Gapminder, and the visualization is built with D3 v4 using scales, axes, nesting, and transitions.

AI-generated description

Block-a-Day #10. In this Gapminder recreation, continents can be exploded into their constituent countries with a paintball-splatter-like effect.

Data Sources: Gapminder.

What I Learned: I've wanted to build something with this technique ever since I saw Nadieh Bremer's demonstrations of it. My addition is to create a separate filter definition for each continent, enabling them to be individually transitioned. For more details, check out her original blog post and follow-up.

What I'd Do With More Time: The explosions have to wait until the next year tick. I'd like to be able to explode them immediately, but I'm not aware of a way to do this with d3.transition alone, so it would probably require a custom animation loop.

Block-a-Day

Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:

  1. Ideas over implementation. Do something novel, don't sweat the details.
  2. No more than two hours can be spent on coding (give or take).
  3. Every. Single. Day.

Previously

forked from <a href='http://bl.ocks.org/cmgiven/'>cmgiven</a>'s block: <a href='http://bl.ocks.org/cmgiven/e5dfe0888968ee8c507f5469a4d62b6f'>Gooey Exploding Scatterplot</a>

mit Licensed

Similar vizzes

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

fresh block

This example visualizes global health and economic trends using a Gapminder-style scatterplot. Each circle represents a country, positioned by life expectancy (x-axis) and fertility rate (y-axis), with circle size encoding population and color representing geographic region. The visualization animates through years 1964 to 2013, showing how countries move across the chart as their metrics evolve. The data, loaded from a CSV, includes fields for country, year, fertility, life expectancy, population, child mortality, and GDP. Using D3 v5 and SVG rendering, the chart emphasizes the relationship between health outcomes and economic development over time, with a transition effect revealing changing distributions across decades. The visualization is minimal and functional, with axes labeling life expectancy and fertility, and a legend for regions.

JJuanma-GP
80% 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
80% match
Loading thumbnail…

Fork of GapMinder (CP341 Style)

This fork of GapMinder visualizes country-level income, life expectancy, and population across 1800–2008, with a scatterplot for a selected year and a second panel tracing each country’s life-expectancy trend over time. A slider and continent dropdown filter the data, while hovering highlights a country’s path and shows a tooltip with exact values. The visualization uses d3.v6 with SVG, scales like `d3.scaleLog` and `d3.scaleLinear`, and transitions via `transition().duration()`. It loads JSON data from a raw GitHub source, with historical annotations appearing at specific years.

Gg_ivaska@coloradocollege.edu
80% 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
79% match
Loading thumbnail…

fresh block

This scatterplot visualizes Gapminder data from 1970, plotting fertility against life expectancy for various countries. Each circle’s size encodes population, while its color distinguishes geographic regions. The visualization uses d3.csv to load the data, d3.scaleLinear for the axes, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with schemeCategory10 for region colors. SVG elements are drawn via d3 selections, with axes generated using d3.axisBottom and d3.axisLeft, and a legend included.

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

Gist c5e80c4ef3f4d3ac5fc33ece65d1490a

This animated scatterplot uses a simulation to show how countries move through a 2D space over time, encoding data from a comprehensive country-level dataset. Each country is represented as a point, with attributes like population, area, fertility, and GDP driving the positions or sizes of the marks. The visualization leverages D3.js v4 for smooth transitions and animated updates, making the shifting distribution of countries across quantitative dimensions easy to follow. The SVG rendering and motion clarify changes in rankings or relationships between variables, turning a dense multivariate table into an explorable temporal narrative.

11wheel
78% match