Zoom and Rotating (Reprojecting)

100%

Zoom and Rotating (Reprojecting)

✓ Published0🌍 Public

Last edited Apr 21, 2017

Created on Apr 20, 2017

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.

AI-generated description

forked from <a href='http://bl.ocks.org/pnavarrc/'>pnavarrc</a>'s block: <a href='http://bl.ocks.org/pnavarrc/43dd75fb3693588c99ff'>Mapping with canvas</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/28941936167f17fe92cc2b5ef4ea5fa4'>Mapping with canvas</a>

forked from <a href='http://bl.ocks.org/AlexanderDavidson/'>AlexanderDavidson</a>'s block: <a href='http://bl.ocks.org/AlexanderDavidson/8a4856f368657571c13a9488503bf07e'>Mapping with canvas v3 -> v4</a>

forked from <a href='http://bl.ocks.org/AlexanderDavidson/'>AlexanderDavidson</a>'s block: <a href='http://bl.ocks.org/AlexanderDavidson/6ef7ebe9bde38eb48cbc4c2856045fbb'>Mapping with canvas aframe test</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a world map rendered on interactive 3D objects—a plane and a sphere—inside an A-Frame virtual reality scene, with the map rotating continuously over time. The geographic data is drawn to a 2D canvas using `d3.geoEquirectangular` for the projection, `d3.geoPath` for generating paths, and `d3.geoGraticule` for the grid lines. A `d3.timer` controls the animation loop, while an A-Frame component (`draw-canvas`) updates the canvas texture on the 3D entities. The map geojson includes country polygons from a natural earth dataset.

AAlexanderDavidson

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

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

92% match

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example demonstrates interactive zooming and rotating of a world map through a 3D scene, allowing for dynamic reprojection of the geography. The visualization combines D3.js for map rendering with A-Frame, a WebVR framework, to create a three-dimensional environment where the map can be manipulated. It uses the Datamaps library to render the world map with custom data fills and overlays like arcs and bubbles, while A-Frame's `a-scene` handles the 3D elements and camera controls. The map is rendered onto a canvas element, which is then used as a material on 3D objects within the scene.

AAlexanderDavidson

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

87% match

Loading thumbnail…

Rotating Equirectangular

This example displays the world map using an equirectangular projection that continuously rotates horizontally. The visualization is rendered on an HTML5 Canvas element using the D3.js v3 and TopoJSON libraries, with a timer-driven animation. The projection’s rotation angle updates over time based on elapsed milliseconds, clearing and redrawing the filled land polygons each frame. World geometry comes from a remote GeoJSON file of 110-meter resolution, processed with `topojson.feature` and drawn via `d3.geo.path` with Canvas context.

Mmbostock

79% match

Loading thumbnail…

Document

This example shows an interactive world map rendered on a Canvas element, with a red landmass silhouette. It demonstrates how to synchronize a custom map projection with the D3 zoom behavior, so that panning and zooming directly manipulate the projection’s translate and scale values. The code uses `d3.geoMercator` and `d3.geoPath` to draw the map, while a topojson mesh is fetched from a remote URL and rendered as filled paths. A zoom handler clears and redraws the canvas on each transform, and the projection is initially fitted to a simple LineString feature using `fitExtent`.

PPhilippe Rivière

76% match

Loading thumbnail…

Rotating Transverse

Two animated map projections rotate in sync on a single canvas: a transverse equirectangular (Cassini) projection on the left and a transverse Mercator on the right. Each frame, `d3.geo.equirectangular` and `d3.geo.mercator` recompute their rotation via `d3.timer`, while `d3.geo.path` renders land from TopoJSON world-110m data and a graticule. The canvas context is manually rotated by 90 degrees to align the transverse orientation.

Mmbostock

76% match