fresh block

100%

✓ Published0🌍 Public

Last edited Jul 29, 2018

Created on Jul 29, 2018

This example animates the classic Gapminder bubble chart, mapping fertility, life expectancy, and population over time. It uses D3 v5 to render SVG circles, with x position encoding GDP per capita, y position encoding life expectancy, and circle size encoding population, while color distinguishes world regions. The chart plays through decades of country-level data, showing how nations move across the socioeconomic landscape as development indicators shift.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example, built with D3 v5 and SVG, visualizes a Gapminder-style dataset using a bubble chart. The x-axis represents GDP per capita, the y-axis shows life expectancy, circle size encodes population, and color maps to geographic region. The chart animates through years 1964 to 2013, showing how countries' development indicators evolve over time. A play button and time slider allow users to scrub through the years, with circles transitioning smoothly between states. The visualization highlights global trends in health and wealth, with tooltips providing country-specific data on mouseover.

AAitorCCE

95% 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

89% 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

87% match

Loading thumbnail…

fresh block

This example visualizes global health and wealth data as a bubble chart, where each circle represents a country positioned by life expectancy (y-axis) and GDP per capita (x-axis), with circle size encoding population and color encoding continent. It uses D3 v4’s scales (`scaleLinear`, `scaleLog`, `scaleSqrt`, `scaleOrdinal`) to map variables and renders SVG circles with axes labeled accordingly. The code loads CSV data via `d3.csv` and applies sorting by population, while styling uses opacity and a light grey background. The chart focuses on comparing country-level indicators, with axes labeled in French.

CClaraGriot

85% match

Loading thumbnail…

fresh block

A scatterplot maps average GDP per capita against life expectancy, with circle size encoding population and color indicating geographic region. The SVG visualization uses D3 v4’s `scaleLinear` and `scaleSqrt` to position and size circles, loading data from `gapminder_avg.csv`. Each point is rendered with a black stroke and fill opacity adjusted for overlap, revealing broad correlations between wealth, longevity, and population across nations.

LLiddler

84% match

Loading thumbnail…

fresh block

This chart visualizes global population data with a circular bubble layout, where each circle's size corresponds to a country’s population value from POP.csv. The visualization uses d3.pack to compute the hierarchical circle packing, with colors assigned via d3.scaleOrdinal and d3.schemeCategory20c. Circle labels are clipped using SVG clipPath elements, while d3.csv loads the data and d3.hierarchy structures it. Each bubble includes a tooltip showing the country name and its formatted population figure.

CCaptainCondescending

82% match

Loading thumbnail…

fresh block

This example visualizes global health and wealth data by plotting circles for each country on logarithmic and linear scales. The x-axis shows GDP per capita (wealth), the y-axis shows life expectancy (health), and circle radius encodes population size, with colors representing continents. The visualization is built with D3 v4, using SVG rendering, and employs `d3.scaleLog`, `d3.scaleLinear`, and `d3.scaleSqrt` for positioning and sizing. Data is loaded from a CSV file, with axes labeled in French for per-capita income and life expectancy at birth.

CClaraGriot

81% 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

79% match