Fork of GapMinder (CP341 Style)

100%

Fork of GapMinder (CP341 Style)

✓ Published0🌍 Public

Last edited May 9, 2024

Created on May 9, 2024

This fork of GapMinder shows global health and wealth trends from 1800 to 2014, with a scatter plot of GDP per capita against average lifespan and an animated line chart tracking each country’s lifespan over time. Users can filter by continent, scrub through years with a slider, and click points to pin a country. Historical annotations, like the 1918 Spanish Flu, appear in a fact box. The visualization uses d3.v6 with SVG, transitions, scales, a line generator, and event handlers for tooltips and interactivity.

AI-generated description

Here is my README!

MIT Licensed

Similar vizzes

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

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

91% match

Loading thumbnail…

GapMinder (CP341 Style)

A dual-panel visualization shows global health and economic trends from 1800 to 2014, with a scatter plot of GDP per capita against average lifespan and a line chart tracking lifespan over time. Animated transitions update both panels as a slider or keyboard controls change the year. Tooltips reveal population details, while historical annotations like the Spanish Flu appear contextually. The implementation uses d3.v6 with `scaleLog`, `scaleLinear`, data joins, and SVG transitions, processing raw country data into Maps keyed by year.

Bbepnye@gmail.com

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

91% 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…

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

82% match

Loading thumbnail…

A Re-Recreation of Gapminder’s Wealth & Health of Nations - Romain Vuillemot

This interactive scatter plot recreates the classic Gapminder visualization, mapping countries as circles over time, with income per capita on the x-axis, life expectancy on the y-axis, and population encoded by circle radius. Users can drag any country circle to explore its historical trajectory, which is drawn as a gray path connecting its annual data points. The code uses D3.js v3 for SVG rendering and animation, with a custom `dragit.js` library handling the drag-and-drop interaction and trajectory display. Data is loaded from a local `nations.json` file, and a slider lets viewers scrub through years from 1800 to 2008.

Ffaversin17

80% match

Loading thumbnail…

The Wealth & Health of Nations

This interactive scatterplot animates 209 years of global development, tracing each nation’s per-capita income (x-axis), life expectancy (y-axis), and population (circle radius) across time. Clicking and dragging the year slider scrubs forward and backward through the dataset, with circles colored by geographic region. The visualization uses D3 v3’s scales (log, linear, sqrt), axes, and transitions, interpolating sparse historical data from Gapminder via linear interpolation and bisection. Rendered as animated SVG elements, it recreates Hans Rosling’s famous 2006 TED talk visualization.

Aabhineetsingh10

79% match