Raster Reprojection of panorama images — inverse colors version

100%

Raster Reprojection of panorama images — inverse colors version

✓ Published0🌍 Public

Last edited Jun 25, 2016

Created on Jun 25, 2016

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.

AI-generated description

Use Jason Davies’ d3.geo.zoom to reproject 360° panorama images.

Forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4329423'>Raster Reprojection</a>.

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/c6efde7d8271a8728cd23c0d268ea787'>Raster Reprojection of panorama images (360°)</a>

gpl-3.0 Licensed

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

89% match

Loading thumbnail…

Raster Reprojection of panorama images (360°) with WebGL

This interactive WebGL visualization reprojects a 360-degree equirectangular panorama image into the stereographic projection, enabling smooth zoom and pan interactions. It displays the source panorama as a textured plane, with the fragment shader performing inverse stereographic projection and rotation calculations in real time. The implementation uses d3.v3 for DOM and event handling, while raw WebGL shaders manage the rendering pipeline, including a custom vertex-fragment shader pair and texture mipmapping. The code compiles shaders, sets up a position buffer for a fullscreen quad, and updates uniform variables for translation, scale, and rotation based on user input.

PPhilippe Rivière

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

74% match

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example demonstrates a dynamic equirectangular world map that is rendered onto a canvas and then applied as a texture to both a plane and a sphere in a 3D A-Frame scene, allowing for zoom and rotation. The map, sourced from a GeoJSON file, uses `d3.geoEquirectangular` projection and a `d3.geoPath` generator to draw graticules and country boundaries. A `d3.timer` drives continuous redraws to the canvas, while the A-Frame `draw-canvas` component integrates it into the virtual environment, with the sphere and camera controls enabling interactive reprojection.

AAlexanderDavidson

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

70% match

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

70% match

Loading thumbnail…

Map Pan & Zoom IV

This example demonstrates fast map panning and zooming on a Canvas. It uses pre-projected geometry from a `world.json` file, rendered via d3.geo.path. Pan and zoom use `d3.behavior.zoom`, with dynamic simplification via a custom `d3.geo.transform` and viewport clipping via `d3.geo.clipExtent`. The map shows country boundaries and a sphere outline.

Mmbostock

69% match

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a continuously rotating and reprojecting world map rendered onto a canvas texture inside a 3D A-Frame scene. It demonstrates how geographic data can be integrated with WebVR-style environments, drawing country polygons, graticules, and the sphere outline using D3 v4’s `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoGraticule`. The animation runs via `d3.timer`, updating the projection rotation each frame and clearing/redrawing the canvas context. The map uses GeoJSON world land data loaded from `land.geojson` and displays alongside a simple A-Frame box primitive.

AAlexanderDavidson

69% match