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.
AI-generated descriptionThis is a simple map example with pan and zoom centered on the Pacific.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.