Skip to main content
100%

Reprojected Raster Tiles

✓ Published0🌍 Public
AAlan McConchie
Last edited Jul 5, 2016
Created on Jun 15, 2016

This example demonstrates dynamic reprojection of raster map tiles in D3, allowing the user to interactively explore the globe using an azimuthal equal-area projection. Built with Canvas rendering, it fetches standard web map tiles from Stamen and reprojects them on the fly using a custom quadtree-based tile-splitting algorithm (d3.quadtiles.js). The map supports zoom and pan, and the projection can be switched among several options (conic conformal, Robinson, Mercator) to show how raster tiles adapt to different coordinate systems. The author notes that non-original projections may cause visual artifacts, such as compression near the equator, highlighting the technical challenges of raster reprojection.

AI-generated description

Zoomable raster world map (which happens to be using Stamen's Map Stack).

Apparently I broke it by trying a projection other than the original. :(

Based off Calvin Metcalf's version, which in turn is based off Jason Davies map which is a combination of Mike Bostock’s raster reprojection, automatic projection tiles and a MapBox terrain example.

Thanks to Mike Bostock and Nelson Minar for their comments and encouragement! And Obviously Jason Davies for making the original.

Similar vizzes

Loading thumbnail…

Raster Reprojection of panorama images (360°)

This example shows a 360° panorama image reprojected onto a world map using a raster reprojection technique. The panorama is mapped to equirectangular coordinates, then projected to the screen using d3.geo.equirectangular. The visualization is interactive: users can click and drag to rotate the view, with d3.geo.zoom handling quaternion-based rotations for smooth, continuous navigation. The image is drawn to an offscreen canvas, and each pixel is remapped based on the inverse projection. Panning and zooming are handled by the d3.geo.zoom plugin, which modifies the projection’s scale and rotation in response to user input. The final result is rendered on a canvas element, allowing fluid exploration of the full 360° panoramic scene.

PPhilippe Rivière
77% match
Loading thumbnail…

Azimuthal Equidistant Raster Reprojection

This example demonstrates an azimuthal equidistant raster reprojection, converting a cylindrical equirectangular Blue Marble image into a disc-shaped Earth view using d3.geoAzimuthalEquidistant. It draws the original JPEG to a Canvas, then uses projection.invert and getImageData to sample source pixels for each target pixel, while calculating the projection disc’s radius to blank out areas outside it. The result is a direct pixel-level transformation rendered entirely on canvas.

Aandrew-reid
76% match
Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example demonstrates map reprojection with zoom and rotation using D3 v4 and canvas rendering. It displays geographic data from `ne_110m_admin_0_sovereignty.geojson` and a graticule, drawn with `d3.geoPath` and a `d3.geoEquirectangular` projection that rotates over time via `d3.timer`. The scene is embedded in an A-Frame 0.5.0 environment with multiple canvas textures applied to 3D entities, including a sphere and plane, using the `draw-canvas` component.

AAlexanderDavidson
76% match
Loading thumbnail…

Raster Reprojection of panorama images — inverse colors version

This interactive canvas visualization uses Jason Davies’ d3.geo.zoom and D3 v3 to reproject a 360° panorama image onto an equirectangular projection. The code loads the panorama, draws it to an offscreen canvas, and then inversely maps each pixel of the target canvas back through the projection, inverting the RGB channels to create a negative-color version. Users can pan and zoom the reprojected image using the d3.geo.zoom behavior and projection scale extent.

PPhilippe Rivière
74% match
Loading thumbnail…

D3-slippy map with canvas tiles

This example demonstrates a slippy map implemented with D3 v4, using canvas rendering for efficient display of OpenStreetMap tiles. The custom `d3.geoSlippy` projection wraps d3.geoMercator and integrates with d3.zoom to enable panning and zooming with proper tile loading and wrapping. Tiles are drawn directly onto a 960×960 canvas, with zoom constraints and tile depth calculated dynamically from the current transform. The map supports interactive pan and zoom while maintaining geographic accuracy through the Mercator projection.

Aandrew-reid
74% match
Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a continuously rotating world map rendered on a Canvas element, with countries and a graticule drawn in grayscale against a dark sphere. Using D3 v4’s `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoGraticule`, the code redefines the projected sphere each frame via a `d3.timer` that increments the rotation speed. Land polygons are loaded from a local `land.geojson` file, and the animation highlights how reprojection affects visible geography as the globe spins.

AAlexanderDavidson
74% match
Loading thumbnail…

d3 geographic tile sets

This example demonstrates a tile-based geographic visualization built with D3 v4, using the d3-slippy module to load and display web map tiles. The visualization cycles through multiple built-in tile sets, rendering them as SVG image tiles within a Mercator projection. It supports pan and zoom interactions, with tile depth automatically calculated from the zoom transform, and includes configurable zoom limits, tile wrapping, and source attribution. The implementation handles tile positioning for both standard cylindrical projections and attempts to address non-cylindrical tile sets, though some tilesets exhibit issues at certain zoom levels or regions. The example is rendered entirely in SVG and includes animated transitions between tile sets.

Aandrew-reid
74% match
Loading thumbnail…

Map Tiles in D3

This interactive map demo, animated with D3, shows map tiles being loaded and positioned as users progressively zoom and pan. It provides a proof-of-concept for tile-based mapping using only D3, avoiding dedicated map libraries. The visualization fetches OpenStreetMap tiles from MapQuest’s tile server, addressing them by column, row, and zoom level. The animation uses D3's selection and transition methods, applying CSS 3D transforms via `matrixString` for smooth scaling, and manages a request queue for efficient image loading. The code demonstrates DOM manipulation and coordinate logic borrowed from Modest Maps, with a fallback to standard CSS transforms.

RRandomEtc
74% match