Pan and Zoom World Map Cities

100%

Pan and Zoom World Map Cities

✓ Published1🌍 Public

Last edited Nov 6, 2024

Created on Oct 24, 2024

This example presents an interactive orthographic world map displaying major cities as points. Users can pan by dragging and zoom with the mouse wheel, manipulating the map’s rotation and scale in real time. The visualization loads country boundaries from the visionscarto-world-atlas TopoJSON and city coordinates and populations from a reduced World Cities CSV. Built with D3’s `geoOrthographic`, `geoPath`, `drag`, and `zoom` APIs, the map renders graticules and updates city positions via the projection each frame.

AI-generated description

A world map showing cities.

Similar vizzes

Loading thumbnail…

Wolrd Cities WIP (Globe with Panning & Zooming)

This example displays a navigable globe with panning and zooming, using a D3 orthographic projection to render landmasses and cities with a population over 50,000. It loads geographic data from the visionscarto-world-atlas and city data from a CSV sourced from the World Cities Database. The `d3.drag` behavior adjusts the globe’s rotation, while `d3.zoom` scales it, with each interaction updating the projection via `d3.geoOrthographic` and `geoPath`.

SShad Frigui

85% match

Loading thumbnail…

Map Pan / Zoom with Cities v5

This map example displays world country boundaries and major global cities, with interactive pan and zoom functionality centered on the Pacific Ocean. The visualization uses d3.geoMercator for projection and d3.geoPath to render geographic features from a TopoJSON world file. City locations from a CSV dataset are plotted as red circles, each hyperlinked to a Google search. Users can apply d3.zoom with a scale extent of 1 to 8, transforming both paths and circles accordingly. The map is rendered as SVG elements within a d3 selection.

Dd3noob

85% match

Loading thumbnail…

Zoom Interation World Map

This interactive world map allows users to pan and zoom by dragging or using the scroll wheel, with the view transform applied to a group element containing all marks. The visualization renders graticules, country boundaries, and interior borders using d3.geoPath with the natural Earth projection, plus two static city points connected by a red line. Data is sourced from the `world-atlas` TopoJSON and a world cities CSV, with zoom handling implemented through D3's `zoom` behavior within a React component.

Ppsabela

85% match

Loading thumbnail…

Map Pan / Zoom with Cities v7

This example shows a pan-and-zoomable Mercator map of the world, centered on the Pacific Ocean, with city locations marked by red dots. The map uses an SVG rendering with countries styled as grey paths, and city coordinates are loaded from a CSV file containing airport codes, city names, and latitude/longitude values. Pan and zoom interactions are enabled through d3.zoom, which applies a transform to all map elements. The map itself is drawn using d3.geoPath with a d3.geoMercator projection, and world topology data is fetched as a JSON file, then converted via topojson’s feature function before being rendered.

Dd3noob

84% match

Loading thumbnail…

World map with zoom / pan and cities

This example presents a world map rendered with SVG, featuring zoom and pan controls. It overlays red circular markers on select global cities, which are loaded from a CSV file and positioned using the Mercator projection via `d3.geo.mercator()`. Each city marker is hyperlinked to a Google search for its name. The map’s geography is drawn from a TopoJSON file, with paths generated through `d3.geo.path()`, while zooming and panning are handled by `d3.behavior.zoom()`.

Dd3noob

83% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v5

This example displays an interactive map of the world centered on the Pacific, overlaid with red circular markers for eleven cities and their labels. Pan and zoom controls are implemented using the `d3.zoom` API, which applies SVG `transform` attributes to all map paths, circles, and text. The map geometry and city positions are projected using `d3.geoMercator` and `d3.geoPath`, with country outlines loaded from a TopoJSON file. City coordinates come from a CSV loaded via `d3.csv`, and text labels are placed above each marker, each linking to a web search.

Dd3noob

82% match

Loading thumbnail…

Map Pan / Zoom with Cities v6

This example shows a Mercator map of the world centered on the Pacific Ocean, with red circles marking eleven cities from a CSV file. Users can pan and zoom the entire map and city markers using the d3.zoom behavior, with a scale extent of 1 to 8. The map is rendered as SVG paths from a TopoJSON file via d3.geoPath, while city positions are projected using d3.geoMercator. Each city circle is wrapped in a link that opens a Google search for that city.

Dd3noob

81% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v7

This example shows a world map centered on the Pacific with red city markers and text labels for each city, all of which can be panned and zoomed together. The map is rendered using D3 v7 with a Mercator projection and a topojson world dataset. City positions are projected from latitude and longitude coordinates loaded from a CSV file. D3’s zoom behavior applies a transform to the map paths, circles, and text, and each city label links to a Google search for its name.

Dd3noob

81% match