Zoom and Rotating (Reprojecting)

100%

Zoom and Rotating (Reprojecting)

✓ Published0🌍 Public

Last edited Apr 21, 2017

Created on Apr 21, 2017

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.

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>

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

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

forked from <a href='http://bl.ocks.org/AlexanderDavidson/'>AlexanderDavidson</a>'s block: <a href='http://bl.ocks.org/AlexanderDavidson/dedd1b05b00dd8dd6622dd21978424a1'>Test 3</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

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

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

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

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

81% match

Loading thumbnail…

World Map: Hover and Zoom/Pan

This example presents an interactive world map rendered in SVG using D3 v5, supporting hover effects and zoom/pan navigation. Users can explore geographic regions by moving the cursor or dragging to reposition the view, with zoom controls enabling closer inspection of specific areas. The visualization employs a projection-based mapping approach, where the map is drawn using `d3.geoPath` and geographic data is transformed into screen coordinates. Interaction is handled through D3's event system and zoom behavior, while the page layout uses fixed positioning CSS to maintain full viewport coverage for the interactive canvas.

TTristan Schrader

75% match

Loading thumbnail…

Zoom Interation World Map

This interactive world map allows users to pan and zoom by dragging or using the scroll wheel, with the view transform applied to a group element containing all marks. The visualization renders graticules, country boundaries, and interior borders using d3.geoPath with the natural Earth projection, plus two static city points connected by a red line. Data is sourced from the `world-atlas` TopoJSON and a world cities CSV, with zoom handling implemented through D3's `zoom` behavior within a React component.

Ppsabela

74% match

Loading thumbnail…

Zoomable World Map

This example presents an interactive world map with natural Earth projection, rendered as SVG paths. Users can zoom and pan via d3.zoom, with the `event.transform` applied to the map group. Country boundaries are drawn using d3.geoPath from TopoJSON data loaded from world-atlas, shaded light green with dark blue oceans. Hovering highlights countries in red, and each country includes a tooltip title populated from TSV metadata with country names.

OOhayouKaminari

74% match