Skip to main content
SimilarExport ZIP
100%

Fork of GapMinder (CP341 Style)

✓ Published0🌍 Public
Kkaijavanzante@gmail.com
Last edited May 13, 2024
Created on May 8, 2024

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.

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

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

Fork of Fork of Fork of Fork of Scatterplot for peng bird dataset

This interactive chart displays changes in life expectancy over time for a selected country, alongside the global average trend. A dropdown menu lets users choose a country, triggering a new SVG line chart with axes and a legend. The visualization uses D3.js v6 to load CSV data, compute yearly averages, and render paths via `d3.line` and scales. It is built with React and renders using SVG, with data sourced from a GitHub-hosted CSV.

Cc_peimann@coloradocollege.edu
82% match
Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

This example plots global economic growth using a scatter plot of GDP per capita against time. Each small blue circle represents a single country's GDP value for a given year. The visualization uses a logarithmic y-axis scale to handle the wide range of data values, revealing trends across nations from 1800 to 2100. The code combines React's state management with D3.js v7, using `scaleLog` for the axis, `scaleLinear` for time, and `csvParse` to transform the loaded Gapminder dataset into a long format for plotting.

Sskasliwal@wpi.edu
82% match