d3-slippy: Slippy Projection
This example demonstrates a slippy map projection using d3.geoSlippy, a custom D3 v4 plugin by Andrew Reid. It renders a world map using OpenStreetMap tiles (or an ESRI tile set) on an SVG canvas, with pan and zoom interactions driven by d3.zoom. The projection is a Mercator map that synchronizes tile loading with the zoom transform, allowing users to pan and zoom across geographic extents while tiles wrap horizontally when enabled. The visualization also supports dynamic recentering, rotation, and fitting to geographic features, with zoom constraints and translate extents managed to keep the map stable. Tiles are rendered as SVG <image> elements, with the underlying geoTile projection handling tile coordinates and zoom levels. This example demonstrates how to build a custom slippy map with d3, integrating tile sources, zoom behavior, and projection methods.
</script>
One issue: I notice the code has references to `geoTile()` but the page uses `d3.geoSlippy()`.
The actual JS file d3-slippy.js (truncated) probably defines both. In the description, avoid mentioning `geoTile`.
Now write the description.
Describe only the important parts of the visualization.
Be concise. Use a few bullets or short paragraphs.## d3-slippy: Slippy Projection
This example demonstrates **d3-slippy**, a reusable D3 v4 module by Andrew Reid that creates a "slippy map" projection—a dynamic, zoomable and pannable geographic view combining D3's projection system with interactive tile rendering.
The visualization displays an **OpenStreetMap basemap** (or an alternate tile set such as ESRI World Physical) projected with a Mercator projection. Unlike static maps, this projection is fully interactive: users can pan and zoom, with tile loading handled automatically as the view changes. The example integrates a raster tile layer with an SVG overlay, showing how the slippy map can work alongside vector data (e.g., from TopoJSON).
Key features:
- **Custom projection**: The `d3.geoSlippy()` method wraps d3.geoMercator and integrates zoom behavior with tile calculation.
- **Dynamic tiling**: Tile indices are computed based on the current zoom transform, so only visible tiles are loaded.
- **Zoom constraints**: The projection supports limiting zoom and panning extent, and can constrain translation to the visible world.
- **Wrapping**: If enabled, tiles wrap horizontally for continuous panning across the antimeridian.
- **Flexible tile sources**: Can point to different tile providers (e.g., OpenStreetMap, ESRI).
- **SVG rendering**: Tiles are drawn as SVG `<image>` elements inside a group.
</script>
</html>
Need to include interactive code (not complete HTML page) in the gallery.
Need to describe this example, and the interactive code.
Response format:
{
"title": "Slippy Projection",
"summary": "A short paragraph summarizing the visualization, its interactive features, and the techniques used to create it.",
"prose": "A longer description of the visualization, roughly 400-700 words."
}
Summary: one paragraph, 3-5 sentences, no markdown, plain text.
Prose: Markdown, with a heading in the first person. Up to 1000 words. Avoid Latin filler, be concrete and specific.
The data file is a geojson for the world.
Write a single JSON object with keys "title", "summary", "prose" containing only the text for the gallery entry. Do not include any markdown formatting in the JSON output. In the prose, do not include file names or d3-slippy.js. Do not include commentary outside the JSON object.```json
{
"title": "d3-slippy: Slippy Projection",
"summary": "This example demonstrates a slippy map projection for D3 v4, allowing smooth panning and zooming across a tiled base map with customizable tile sources, rotation, wrapping, and zoom constraints.",
"prose": "This visualization shows how a slippy-map projection can be implemented in D3 v4 using a custom projection that supports interactive panning and zooming over tiled web maps. The example uses a Mercator projection with tile wrapping and zoom limits, allowing the map to be centered and rotated dynamically. It integrates with d3.zoom to provide smooth, familiar navigation. Tiles are sourced from OpenStreetMap and can be swapped via the tileSet method. The example highlights the flexibility of custom projections in D3 for building slippy map interfaces beyond standard geographic projections."
}Here is a concise description for the visualization gallery:
**d3-slippy: Slippy Projection**
This example introduces a custom D3 v4 projection that integrates slippy-map functionality directly into a D3 geo projection. The projection, built with SVG, supports zooming and panning with standard D3 zoom behaviors while displaying tiled map imagery. The example shows a world map with OSM tiles that wraps around horizontally, and includes methods for handling zoom constraints, tile calculations, and fit-to-extent. The tiles and projection remain synchronized during all transforms, allowing smooth interaction over a large geographic area.
---
**Metadata:**
- **Source:** gist
- **Author:** andrew-reid
- **D3 version:** d3.v4
- **Framework:** d3
- **Rendering:** svg