Skip to main content
100%

Azimuthal Equidistant Raster Reprojection

✓ Published0🌍 Public
Aandrew-reid
Last edited Mar 17, 2017
Created on Jan 25, 2017

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.

AI-generated description

This bl.ock is a response to a question on reprojecting rasters in d3. The approach is covered in this answer: Stack Overflow answer.

It assumes a geographic projection that projects the earth on to a disc, so that one can calculate the radius of the disc and trim the image to this area. This is required as the d3 projection function is not one to one.

Similar vizzes

Loading thumbnail…

Raster Reprojection

The Blue Marble earth image is reprojected from its equirectangular form into the Kavrayskiy7 projection, displayed on a dark canvas. The code loads the image, draws it, and then uses `projection.invert` from `d3.geo.kavrayskiy7` to map each output pixel back to source coordinates, sampling pixel data via Canvas `getImageData` and `putImageData`. This pixel-by-pixel transformation runs entirely in the browser with D3 v3 and `d3.geo.path`.

Mmbostock
80% match
Loading thumbnail…

Reprojected Raster Clipping

This example shows a reprojected raster of the Blue Marble satellite image, clipped to a Hammer projection of the Earth. The code loads the equirectangular source image onto a Canvas and uses `d3.geo.projection` with the Hammer raw function to invert each target pixel’s coordinates, then checks the forward projection to verify pixel validity. It manually reads pixel data via Canvas `getImageData` and writes to a new `createImageData` buffer, skipping out-of-bounds or non-invertible locations. The result renders a smoothly clipped, non-circular projected map using d3.v3 and Canvas 2D drawing.

Aandrew-reid
77% match
Loading thumbnail…

Reprojected Raster Tiles

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.

AAlan McConchie
76% match
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
72% 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
72% 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
71% match
Loading thumbnail…

Azimuthal Equidistant

This example uses D3 version 3 to create an azimuthal equidistant projection centered on New York City. It draws graticule rings at constant distances from that origin using `d3.geo.circle` and projects them with `d3.geo.azimuthalEquidistant`. The map renders world landmasses and country boundaries from a TopoJSON source, presenting the Earth’s surface as a set of concentric distance rings with a white boundary overlay.

Mmbostock
71% match
Loading thumbnail…

Azimuthal Equidistant

This example demonstrates the azimuthal equidistant projection, a map projection that preserves accurate distances from a central point. The map is centered on San Francisco, with the world rendered using outlines and filled landmasses. The visualization uses D3’s `d3.geoAzimuthalEquidistant` projection and `d3.geoPath` to draw the sphere, graticule, and geographic features. Land and boundary data come from a world-atlas TopoJSON file, processed using the `topojson-client` library. The SVG output includes a graticule, a stroked sphere outline, and a white-filled sphere background.

Mmbostock
70% match