Skip to main content
SimilarExport ZIP
100%

GapMinder (CP341 Style)

✓ Published4🌍 Public
Bbepnye@gmail.com
Last edited May 13, 2024
Created on May 7, 2024

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.

AI-generated description

Here is my README!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of GapMinder (CP341 Style)

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.

Wwillapolman@gmail.com
91% 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
90% 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
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
85% 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
85% 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…

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

Gapminder Data in React and D3 - interactive regions

This interactive Gapminder visualization, built with React and D3, maps country-level indicators like income per capita, life expectancy, and fertility rate over time (1950-2015). Users can switch axes, scrub through years with a slider, and hover or click the color legend to highlight or select world bank regions. The map background uses `geoNaturalEarth1` and `geoPath` from D3, while SVG circles are scaled with `scaleSqrt` and colored via `scaleOrdinal`. Data is fetched from a Gapminder summary CSV.

Llakalia@wpi.edu
76% match