Easy map interactions

100%

Easy map interactions

✓ Published0🌍 Public

Last edited Jan 4, 2020

Created on Jan 3, 2020

This example demonstrates an interactive map of world countries, colored by economic classification using a spectral color scale. Users can zoom and pan the map, and click the color legend to filter countries by economy type, which fades non-selected categories. Built with D3 v5, it uses `d3.geoPath` for map projection and `d3.geoNaturalEarth1` for geometry, coupled with `d3.zoom` for pan/zoom interactions. Data comes from the world-atlas package, merging TopoJSON geometry with TSV tabular data. The map renders as SVG paths, with hover effects and animated transitions for legend interactions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with interactions

An interactive choropleth map encodes a country's economy category through a spectral color scale. Pan and zoom via D3's `zoom` and `event` APIs manipulate the SVG projection, while clicking a legend tick highlights only countries in that category. Hovering reveals the country name and value via a `title` element. The map uses `d3.geoPath` and `geoNaturalEarth1` on World Atlas TopoJSON, with the legend built from `scaleOrdinal` and `schemeSpectral`.

WWarren-Fitzhenry

88% match

Loading thumbnail…

Interactive WorldMap

This interactive visualization displays a world map colored by each country’s economy type, using a natural Earth projection. The map supports pan and zoom through `d3.zoom`, with country names and economy values shown as tooltips via SVG `<title>` elements. It loads geographic data from the world-atlas TopoJSON and country names from a TSV file, then maps economy categories to a spectral color scale using `d3.scaleOrdinal`. The code relies on `d3.geoPath` to render countries and a sphere outline, with hover effects changing country fills to red.

KKelsey Xu

88% match

Loading thumbnail…

Map with selectable country

This example presents a world map with countries colored by economic category, where clicking a country highlights it and dims all others; clicking again deselects it. The visualization includes a color legend with clickable swatches that filter the map’s opacity. Built with D3 v5, it uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom` for the interactive map, rendered as SVG. Country data comes from World Atlas TopoJSON, while economic classifications load from a TSV file. A sequential ordinal color scale based on `schemeSpectral` drives the fill colors.

NNita

88% match

Loading thumbnail…

world map with colors

This interactive choropleth map colors each country by its economy category, using a spectral color scale and click-to-highlight interaction to compare regions. Built with D3 v5, it renders country outlines via `d3.geoPath` with a Natural Earth projection, loads TopoJSON country boundaries from the World Atlas, and joins economic classifications from a TSV file. A zoom behavior enables panning and scaling, while an ordinal color legend supports filtering by clicking a category to fade unmatched countries.

BBajiSharifPatan@my.unt.edu

87% match

Loading thumbnail…

Easy map interactions

This example displays an interactive world map rendered with SVG, using natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. The map loads country boundaries and names from the world-atlas TopoJSON and TSV datasets. Users can pan and zoom using d3.zoom, which applies a transform to the map group. Hovering highlights individual countries in red, and each country includes a native SVG title element displaying its name as a tooltip.

WWarren-Fitzhenry

87% match

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates interactive map exploration using D3.js version 5, visualizing world economies with a color legend and zoom functionality. The map renders countries as SVG paths via `d3.geoPath` and `geoNaturalEarth1` projection, colored by economic classification using `scaleOrdinal` with the `schemeSpectral` palette. Hovering highlights countries in red, while a zoom behavior enables pan and scale transformations. Data comes from the World Atlas TopoJSON and TSV files, with a custom color legend component showing the categorical scale.

Jjay

87% match

Loading thumbnail…

Choropleth map interactive filtering

This example presents a choropleth map of the world, where countries are colored according to their economy using a spectral color scale. The map supports interactive filtering: hovering highlights a country, and clicking a legend item dims all countries except those matching the selected economy category. The visualization is rendered as SVG using d3.geoPath with a geoNaturalEarth1 projection, while the color legend is built with d3.scaleOrdinal and d3.schemeSpectral. Country data comes from the world-atlas TopoJSON dataset, merged with TSV metadata. The zoom and pan interaction is enabled through d3.zoom, applying event.transform to the map group.

SSagar Malviya

86% match

Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map colored by economic classification, using a sequential spectral color scale. Users can pan and zoom the map via d3.zoom, which applies a transform to the geographic group. Hovering highlights individual countries with a red fill via CSS. The visualization loads country boundaries from TopoJSON and metadata from TSV, projecting them with d3.geoNaturalEarth1 and rendering paths with d3.geoPath. It uses d3.scaleOrdinal and d3.schemeSpectral to map economic data to colors, with tooltips showing country names and values.

IIsabel

86% match