Raster Reprojection

100%

Raster Reprojection

✓ Published0🌍 Public

Last edited Dec 6, 2019

Created on Dec 18, 2012

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`.

AI-generated description

The NASA Blue Marble is reprojected using d3.geo.kavrayskiy7’s invert function. Jason Davies has since done some amazing work on reprojecting raster tiles.

gpl-3.0 Licensed

Similar vizzes

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

70% match

Loading thumbnail…

Kavrayskiy VII

This example displays the Kavrayskiy VII projection, a pseudocylindrical world map. It renders the Earth’s landmasses in dark gray with white country boundaries, overlaid on a graticule and sphere outline. Built with D3 v3, it uses `d3.geo.kavrayskiy7`, `d3.geo.path`, and `d3.geo.graticule`, loading world data via TopoJSON. Land and mesh features are drawn as SVG paths, with the projected sphere defined as a reusable path element.

Mmbostock

68% 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

67% match

Loading thumbnail…

projection debugging

This example visually compares two map projections of the same world dataset by layering them in red and blue on a canvas. Using D3’s `geoTransform` and `geoProjection`, a standard equirectangular projection (blue) is juxtaposed with a custom sheared transform (red) that skews longitude by latitude. The code loads world country boundaries from a local JSON file and renders both outlines overlaid, making differences in shape, rotation, and distortion immediately visible. The canvas drawing highlights how tiny variations in projection logic can produce significant spatial divergence, offering a quick, intuitive way to debug or inspect map projections.

PPhilippe Rivière

66% 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

65% match

Loading thumbnail…

Raster & Vector II

A map of the United States uses a red outline to show state boundaries over OpenStreetMap raster tiles. The code combines d3-tile for tile loading, d3.geoMercator and d3.geoPath for reprojecting TopoJSON vectors, and d3-zoom for pan and zoom. On each interaction, the tile set and vector geometry are recomputed rather than relying on a transform, with tiles rendered as SVG images.

Mmbostock

64% match

Loading thumbnail…

Craster Parabolic

This example displays a world map projected using the Craster parabolic projection, with graticule lines, country boundaries, and landmasses rendered in SVG. The visualization uses d3.geo.craster from the d3.geo.projection.v0 library, along with d3.geo.path for geographic path generation and topojson.v1 to parse world-50m.json data. A sphere outline and fill are drawn first, followed by graticule and geographic features from the TopoJSON file, with styling applied via CSS classes.

Mmbostock

64% match

Loading thumbnail…

Raster & Vector I

This example displays geographic vector boundaries overlaid on a raster map of Detroit. Using d3-tile to fetch and position OpenStreetMap image tiles, it renders them as a base layer within an SVG canvas. The d3.geoPath and d3.geoMercator projections draw a TopoJSON mesh of Detroit’s streets on top, creating a composite view of vector data and raster imagery.

Mmbostock

63% match