Skip to main content
100%

Iceland TopoJSON -pan/zoom

✓ Published0🌍 Public
ZZJONSSON
Last edited Nov 6, 2014
Created on Jan 31, 2013

This example displays a topographic map of Iceland using the TopoJSON format, with individual polygons colored on a green-to-white scale based on elevation data. The map supports interactive pan and zoom through the D3.js `d3.behavior.zoom` API, which applies translation and scaling transforms to the SVG group containing the projected paths. The visualization renders geographic features via `d3.geo.path` with a Mercator projection, and data is sourced from the National Land Survey of Iceland.

AI-generated description

Similar vizzes

Loading thumbnail…

Iceland Topography

This example displays Iceland’s elevation as a colored contour map, using a green-to-white scale for low to high terrain. It renders geospatial data from TopoJSON as SVG paths via `d3.geo.path` and a Mercator projection, with zooming controlled by `d3.behavior.zoom`. Topography comes from the National Land Survey of Iceland, encoded in the `flakar` dataset. The map resizes to fit the window and draws all features with a thin black stroke.

Mmbostock
88% match
Loading thumbnail…

Map Pan & Zoom I

This map visualization shows a world map with country boundaries that can be panned and zoomed via mouse interaction. It uses d3.behavior.zoom with SVG transforms to apply translate and scale operations to the map group. The map is rendered using d3.geo.path with a Mercator projection, drawing landmasses as merged TopoJSON polygons and boundaries as meshes. Geographic data comes from a TopoJSON world-50m file hosted in a GitHub gist, with zoom scale restricted between 1x and 8x.

AAlan McConchie
79% match
Loading thumbnail…

Map Pan and Zoom v6

This example demonstrates an interactive world map that supports panning and zooming, centered on the Pacific Ocean. The map renders country boundaries as SVG paths filled with grey, using the `d3.geoMercator` projection and `d3.geoPath` to generate the geometry. A `topojson` data file supplies the world topology. The `d3.zoom` API applies a transform to the SVG group containing the paths, with a scale range between 1x and 8x, enabling the user to explore the map.

Dd3noob
78% match
Loading thumbnail…

Map Pan & Zoom I

A black-and-white world map renders on a light gray background using the Mercator projection. This example demonstrates map panning and zooming through the `d3.behavior.zoom` API, which applies SVG transforms to a group containing the geographic paths. The map is built from TopoJSON world data with `d3.geo.path`, and the zoom scale is limited to 1–8×. A transparent overlay rect captures pointer events, enabling the interactive behavior.

Mmbostock
77% match
Loading thumbnail…

Map Pan and Zoom v7

This example displays a world map centered on the Pacific Ocean, rendered as SVG paths filled in grey with white borders. Using the d3.geoMercator projection and d3.geoPath, it draws country boundaries from a TopoJSON file loaded via d3.json. The d3.zoom module provides interactive pan and zoom controls, applying the resulting transform directly to the map’s path elements within a scale extent of 1 to 8.

Dd3noob
77% match
Loading thumbnail…

map interactions

This example displays an orthographic projection of the world map using D3.js and TopoJSON, with country boundaries rendered as SVG paths. Hovering over a country turns it red, while a d3.zoom behavior allows panning and zooming of the entire map. The map data comes from the world-atlas TopoJSON and TSV files, and country names are added as tooltips via SVG title elements. The projection and path generation use d3.geoOrthographic and d3.geoPath.

EEmmanuel Chukwujindu
76% match
Loading thumbnail…

Map Pan and Zoom v5

This map of the world centers on the Pacific Ocean and lets users pan and zoom. It uses a Mercator projection via `d3.geoMercator` and renders country boundaries as SVG paths from TopoJSON data. The `d3.zoom` behavior applies a transform to the path group, enabling interactive navigation with a scale extent of 1 to 8.

Dd3noob
76% match
Loading thumbnail…

Let's Make a map

This example displays a zoomable world map using geographic data from the world-atlas TopoJSON files. It renders country boundaries as SVG paths via d3.geoPath with a d3.geoNaturalEarth1 projection, and d3.zoom enables pan/zoom interactions that update the map group’s transform. Country names come from a TSV file joined by ISO numeric codes, appearing as hover tooltips via SVG title elements. Countries fill red on hover, while the sphere outline is drawn from a GeoJSON sphere object.

KKyeonghun Min
76% match