Zoom and Rotating (Reprojecting)

100%

Zoom and Rotating (Reprojecting)

✓ Published0🌍 Public

Last edited Apr 20, 2017

Created on Apr 20, 2017

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.

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>

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

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

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

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

81% match

Loading thumbnail…

Rotating Transverse Mercator

A rotating transverse Mercator projection continuously spins a world map around its central meridian, showing how the projection distorts shapes and areas away from the axis of rotation. The animation uses a dark canvas with white country borders and a semi-transparent graticule, all rendered via `d3.geoPath` and Canvas 2D drawing. Land polygons and country boundaries come from TopoJSON data in the world-atlas package, while a `d3.timer` updates the projection’s rotation each frame. The code specifies `d3.geoTransverseMercator`, `d3.geoGraticule10`, and `topojson.feature` and `topojson.mesh` for data processing.

Mmbostock

80% match

Loading thumbnail…

Rotating Orthographic

A rotating orthographic projection of the world, rendered via canvas animation, shows the globe slowly spinning as landmasses and country borders move across the sphere. The code uses `d3.geo.orthographic` with a clip angle to define the projection, `d3.geo.path` to draw land, borders, and graticule, and `d3.json` to load world-110m GeoJSON data. A timer updates the rotation angle over time, clearing and redrawing the canvas each frame.

Mmbostock

80% match