Skip to main content
SimilarExport ZIP
100%

life-expectancy-map

✓ Published3🌍 Public
Aabhyudaithakur7@gmail.com
Last edited Oct 3, 2025
Created on Oct 3, 2025

This interactive choropleth map displays global life expectancy by country, with a selectable year slider that updates the color-coded visualization. Built with React and D3 v7, it loads UN WPP data from a CSV file and combines it with world GeoJSON topology using continent geometry from world-atlas. The map uses d3.geoPath, d3.scaleSequential, and d3.interpolateYlGnBu to render country polygons, while d3.pointer and mouse events drive tooltip interactions showing country names and values.

AI-generated description

Scatter Plot — First Visual

This project is a first prototype (“first visual”) for my dataset.

Dataset & Source

Columns used

  • X: Year (parsed as time)
  • Y: life_expectancy (years)
  • (Optional) Filtered to a single country for clarity.

Forked from “Basic Scatter Plot with React & D3” by Curran Kelleher.

Iteration Notes

  • Converted scatter → line chart to suit time series.
  • Added axes & axis labels; colored lines by country with inline labels.
  • Data: UN WPP via Our World in Data (life expectancy by country/year, 2000+). Source: https://ourworldindata.org/life-expectancy Columns used: Entity, Year, life_expectancy
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of life-expectancy-map-polish-v1

This interactive choropleth displays global life expectancy by country across selectable years, using a color-coded world map rendered with React and D3 v7. The visualization loads data from a CSV file containing Entity, Code, Year, and life expectancy values, which are parsed and filtered to valid ISO-3 country codes. Countries are drawn using `d3.geoPath` with GeoJSON data from the world-countries package, and a year slider controls which temporal snapshot appears. A color scale encodes the life expectancy values, while hover interactions show detailed tooltips. The implementation uses `d3.text`, `d3.dsvFormat`, and React hooks for state management.

Aabhyudaithakur7@gmail.com
90% match
Loading thumbnail…

Map Example

This example visualizes global life expectancy by coloring countries on a Mercator-projected world map, with a white-to-blue linear color scale mapping values. Hovering a country fades others to 50% opacity, highlights the selected one, and outlines it with a black stroke. Built with React and SVG, it uses d3.geoPath with a geoMercator projection to draw GeoJSON features, d3.queue to load data, and d3.csv to parse the 2023 world dataset. Data includes a d3.map storing life expectancy per country, with colors applied via a scaleLinear domain from the data’s extent.

LLouisa Penrice
86% match
Loading thumbnail…

life-expectancy-network-final

This interactive network visualization maps global life expectancy trends from 2000 to 2023. Each node represents a country, with its size proportional to the latest year's life expectancy and its color indicating geographic region. Edges connect countries whose life expectancy time series are most strongly correlated, based on Pearson correlation coefficients (top-K neighbors, thresholded by a minimum r-value). Users can drag nodes, pin them in place, search for specific countries, and filter by region via an interactive legend. The visualization, built with React and D3.js (d3.v7), uses a force-directed layout to position nodes dynamically.

Aabhyudaithakur7@gmail.com
82% match
Loading thumbnail…

A9 Life Expectancy of the World in 2015

A choropleth map of the world displays national life expectancy in 2015, with a quantized color scale shading countries from pale lavender to deep purple based on their average lifespan. The visualization loads country boundaries from a GeoJSON file and life expectancy data from a CSV using D3 v7, projecting geographic coordinates with `d3.geoMercator` and rendering paths via `d3.geoPath`. A hover interaction changes the fill color of individual countries, while the underlying data originates from the World Health Organization via Kaggle.

AAllen Jake Polintan
81% match
Loading thumbnail…

Fork of Polished World Map

This map visualizes healthy life expectancy by country using a dark-to-light blue sequential color scale. Built with React and D3 v5, it renders geospatial data as an SVG using `d3.geoEqualEarth` projection and `d3.geoPath`. Country boundaries come from World Atlas TopoJSON, with a white mesh overlay and graticules for visual polish. A color legend, generated via a `Legend` function, displays the value range. The map loads data through a custom `useData` hook that fetches and parses the TopoJSON topology.

NNICHAPA
80% match
Loading thumbnail…

Interactive Color Legend Scatter Plot for Life Expectancy Data with Menu for Mortality

This interactive scatter plot visualizes correlations between life expectancy, infant deaths, and adult mortality across continents. Using React and D3 v5, the visualization includes dropdown menus to switch the x- and y-axis attributes, while continent data drives the ordinal color scale for the legend. Circle sizes encode GDP, and tooltips display life expectancy values. The color legend supports hover interaction with fade effects for highlighting specific continents, and the data originates from a CSV file loaded via d3.csv.

Aaishwarya8615
79% match
Loading thumbnail…

Section 1(b)-Making Maps Using TOPOJSON

This example presents a world map visualizing life expectancy across 27 countries, colored with a turquoise-to-red scale (d3.scaleSequential with interpolateTurbo) and showing a tooltip on hover with the country name and average years. It uses the Natural Earth projection (d3.geoNaturalEarth1) and generates geographic paths with d3.geoPath, rendering the sphere and graticule for context. The map loads world boundaries as GeoJSON, maps country names to life-expectancy values via a lookup table, and supports zooming/panning through d3.zoom.

SSYAM TEJ
79% match
Loading thumbnail…

Choropleth Update May 7

A linked choropleth map and scatter plot visualize country-level indicators like life expectancy, birth rate, and urban population. The map uses `d3.geoEqualEarth` and `d3.geoPath` to render country shapes, colored by a `d3.scaleLinear` based on urban rate. The scatter plot uses `d3.scaleLinear` and `d3.scaleOrdinal` to encode population and continent, with interactive drop-downs to change attributes and buttons to toggle between linear and logarithmic axis scales, updating both views with smooth `transition` animations.

Gg_ivaska@coloradocollege.edu
78% match