Skip to main content
SimilarExport ZIP
100%

Cheap tricks for interactive maps

✓ Published2🌍 Public
BB Sundaresan
Last edited Jul 13, 2020
Created on Jul 13, 2020

This example demonstrates interactive zoom and pan on a world map rendered with SVG. It uses the Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath to draw country boundaries and a blue sphere background. The map loads GeoJSON data from the world-atlas TopoJSON file on CDN, with country names supplied by the data’s properties. Hovering changes country fill color via CSS, while d3.zoom applies event-driven transforms to the map group. The visualization relies on D3 v5 and TopoJSON client libraries.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates a zoomable world map with country outlines and hover highlighting, rendered as SVG. The map uses D3's `geoNaturalEarth1` projection and `geoPath` to draw country shapes from the world-atlas TopoJSON dataset, with a sphere background. Interactive zoom is implemented via D3's `zoom` module, which applies a transform to the map group on zoom events. Country names are joined from TSV data, and hovering over a country fills it red via CSS `.country:hover`. The visualization is built with React and D3 v5.

Zzakaria badri
93% match
Loading thumbnail…

Cheap tricks for interaction

This example demonstrates a world map with zoom and hover interactions. Using D3’s `geoNaturalEarth1` projection and `geoPath`, it renders country boundaries from TopoJSON world-atlas data, with country names loaded via TSV. A D3 zoom behavior on the SVG applies a transform to the map group, enabling pan and scale. Hovering over a country changes its fill to red via CSS, highlighting the selected region.

Nnsadath
93% match
Loading thumbnail…

Cheap tricks for interaction

This example demonstrates a world map with zoom and hover interactions. Using D3’s `geoNaturalEarth1` projection and `geoPath`, it renders country boundaries from TopoJSON world-atlas data, with country names loaded via TSV. A D3 zoom behavior on the SVG applies a transform to the map group, enabling pan and scale. Hovering over a country changes its fill to red via CSS, highlighting the selected region.

Nnsadath
93% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a zoomable world map with hover highlighting, using a natural Earth projection to render country boundaries from TopoJSON data. The map supports interactive pan and zoom through d3.zoom, with a tooltip title displaying each country’s name from a TSV lookup. Countries fill light green and turn red on hover via SVG styling. The visualization relies on d3.geoPath, d3.geoNaturalEarth1, and topojson.feature to draw geographic shapes.

Ccledevoute
93% match
Loading thumbnail…

Cheap tricks for interaction

This example shows an interactive world map built with D3 v5 and TopoJSON, using a Natural Earth projection. Users can pan and zoom the map via the `d3.zoom` API, with the viewport transform applied to a group element. Country boundaries are rendered as SVG paths via `d3.geoPath`, with hover highlighting controlled by CSS. The map loads world-atlas data from unpkg, joining TopoJSON features to TSV country names for tooltips.

RRoger Yu-Hsiang Lo
93% match
Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates interactive pan and zoom on a natural Earth projection map of world countries. Built with D3 v5, it uses `d3.zoom` to apply SVG transforms and `d3.geoPath` with `geoNaturalEarth1` for rendering. Country boundaries come from TopoJSON world-atlas data, with names matched via a TSV file and displayed as `<title>` tooltips. Hovering highlights a country in red, while the sphere background is blue.

MMukund Khandelwal
93% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a zoomable world map rendered as an SVG, with country names displayed as hover tooltips. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with geographic data loaded from the World Atlas TopoJSON and country names from its accompanying TSV file. The map supports pan and zoom through `d3.zoom`, and the code includes a commented-out `d3.behavior.zoom` variant. Country boundaries are drawn as light green paths with black strokes, while the ocean sphere is filled blue.

MMukund Khandelwal
93% match
Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates a world map with interactive pan and zoom, using a natural Earth projection rendered as SVG. Country boundaries are drawn from TopoJSON data enriched with names from a TSV file, and hovering highlights individual nations in red. The implementation relies on D3 v5 features including `d3.zoom`, `d3.geoPath`, and `d3.geoNaturalEarth1`, with the map contained in an SVG group that responds to zoom transforms. Tooltips are provided through SVG `<title>` elements.

OOliver Wills
93% match