Skip to main content
100%

Document

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Aug 14, 2020
Created on Aug 14, 2020

This example shows an interactive world map rendered on a Canvas element, with a red landmass silhouette. It demonstrates how to synchronize a custom map projection with the D3 zoom behavior, so that panning and zooming directly manipulate the projection’s translate and scale values. The code uses `d3.geoMercator` and `d3.geoPath` to draw the map, while a topojson mesh is fetched from a remote URL and rendered as filled paths. A zoom handler clears and redraws the canvas on each transform, and the projection is initially fitted to a simple LineString feature using `fitExtent`.

AI-generated description

Similar vizzes