Skip to main content
SimilarExport ZIP
100%

Map Example

✓ Published0🌍 Public
LLouisa Penrice
Last edited May 1, 2024
Created on May 1, 2024

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

life-expectancy-map

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.

Aabhyudaithakur7@gmail.com
86% match
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
83% 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
83% 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
82% match
Loading thumbnail…

Selection

This example shows a linked choropleth map and scatter plot of country data, with a color scale mapping urbanization rates from green to grey and a scatter plot encoding life expectancy, GDP per capita, and population using position, color, and radius. The visualization supports interactivity by letting users select data points, which updates the map's color scale and the scatter plot's axes. It uses d3.geoEqualEarth for the map projection, d3.geoPath to render country shapes, and d3.scaleLinear for color, position, and size scales. Hovering over points triggers a tooltip via CSS transitions.

Bbepnye@gmail.com
82% match
Loading thumbnail…

Another stab at a map

This example shows a world map colored by fertility rate per country, using a blue-to-white linear scale to indicate values. The map is built with D3 v4, loading GeoJSON topology from a GitHub repository and CSV data from another source, then joining them by country name. It uses `d3.geoMercator` for projection and `d3.geoPath` to draw country boundaries as SVG paths. The color scale is created with `d3.scaleLinear` and applied to each country’s fill, rendering a choropleth visualization in a static SVG canvas.

LLouisa Penrice
81% 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
80% match
Loading thumbnail…

Country Map with d3.js

This example displays a world map using D3.js, coloring individual countries based on sample population data. It shows a Mercator projection of the globe, with the United States and China shaded according to the provided values. The visualization constructs the map by appending SVG paths from GeoJSON data to the chart. It relies on D3 APIs including `d3.geoMercator`, `d3.geoPath`, `d3.json`, `d3.scaleLinear`, and `d3.extent` to handle the projection, rendering, and color encoding, with a domain from data values mapped to a light-to-dark color range.

UUVarshaReddy
80% match