Skip to main content
SimilarExport ZIP
100%

Fork of GapMinder (CP341 Style)

✓ Published0🌍 Public
Gg_ivaska@coloradocollege.edu
Last edited May 8, 2024
Created on May 8, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
92% match
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
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…

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

Gapminder Data in React and D3 - worldmap colored

This visualization displays historical Gapminder country data—including income, population, life expectancy, and fertility—on a world map colored by World Bank region, with a scatterplot overlay showing data over time. The React app uses D3 v5 scales (scaleLinear, scaleOrdinal) and geoNaturalEarth1 projection with geoPath to render the atlas, while the dropdown menu switches the y-axis metric. Data is loaded via d3.csv from a Gapminder summary, and country colors are matched via a lookup table.

Llakalia@wpi.edu
81% match