Global zoom pan

100%

Global zoom pan

✓ Published0🌍 Public

Last edited Dec 7, 2017

Created on Dec 7, 2017

This example shows an orthographic globe that responds to both dragging and zooming. Drag gestures rotate the projection, while zooming scales the globe’s size. The visualization uses a d3.geoOrthographic projection with a d3.geoPath renderer to draw world country boundaries from a GeoJSON file hosted by visionscarto.net. Interaction is handled via d3.zoom for scaling and d3.drag for rotation, with linear scales mapping screen coordinates to latitude and longitude offsets. The globe’s sphere is rendered as a light blue background, and a single orange point marks a specific coordinate.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Globe with Panning & Zooming

This example shows an interactive orthographic globe of the world that supports panning and zooming. It displays country outlines and graticules, rendered with the d3-geo projection system and the geoPath and geoGraticule APIs. The visualization loads GeoJSON country data from a remote TopoJSON file. Users can drag to rotate the globe, which updates the projection’s rotation, and scroll to zoom, which adjusts the scale around a fitted initial view. The code relies on d3-drag and d3-zoom behaviors to handle these interactions.

NNelson M

89% match

Loading thumbnail…

Orthographic Zoom II

This example demonstrates panning and zooming on an orthographic globe projection, allowing users to rotate the Earth by dragging and scale it with a zoom gesture. Building on a prior version, it improves panning accuracy by accounting for latitude during the rotation adjustment. The implementation uses D3 v4 with `d3.geoOrthographic` and `d3.geoPath` for rendering, alongside `d3.drag` and `d3.zoom` for interaction. Landmasses come from the `world-110m` dataset in TopoJSON format, and the globe is drawn as SVG paths.

CCurran Kelleher

88% match

Loading thumbnail…

Globe with panning & zooming

This example presents an interactive globe that users can pan and zoom, rendered using a D3 orthographic projection. Landmasses and internal country borders are drawn from the visionscarto-world-atlas TopoJSON dataset via `d3.geoOrthographic` and `geoPath`. The globe responds to drag interactions for rotation and mouse-wheel zoom events, adjusting the projection’s rotation and scale through `d3.drag` and `d3.zoom` handlers. A fitted initial view establishes the default scale, while the sphere, land, and country-mesh features are styled via CSS classes.

SShad Frigui

88% match

Loading thumbnail…

Globe with Panning & Zooming

This example presents an interactive orthographic globe that users can pan by dragging and zoom with the scroll wheel. The visualization renders landmasses and internal country borders, projecting the 3D sphere onto a 2D plane using d3.geoOrthographic and d3.geoPath. The globe's rotation and scale are controlled via d3.drag and d3.zoom, with panning sensitivity inversely tied to the current zoom level. World geometry comes from the visionscarto-world-atlas package, processed with topojson-client to extract features and meshes.

SShad Frigui

87% match

Loading thumbnail…

Panning & Zooming on a Globe - old

This example shows an interactive orthographic globe that supports panning and zooming. Users drag to rotate the Earth and use the mouse wheel to scale the projection. The visualization renders world landmasses from TopoJSON data using `d3.geoOrthographic` and `d3.geoPath`. Panning is implemented with `d3.drag` to adjust the projection’s rotation, while zooming uses `d3.zoom` to modify its scale. The code also uses `d3.select` and `d3.json` to load and render the geographic features.

CCurran Kelleher

87% match

Loading thumbnail…

Fork of Panning & Zooming on a Globe

This example shows an interactive orthographic globe that can be panned by dragging and zoomed with the mouse wheel. Dragging rotates the projection based on drag distance and scale, while zooming adjusts the projection’s scale factor. The globe renders country boundaries from the `world-atlas` TopoJSON dataset using `d3.geoOrthographic` and `d3.geoPath`. User interaction is handled through `d3.drag` and `d3.zoom`, with rendering updating dynamically on each event.

Ssophievanderhorst

86% match

Loading thumbnail…

Globe with Panning & Zooming

This globe shows world country boundaries projected with an orthographic projection, rendered as SVG paths. Users can pan by dragging, which adjusts the globe’s rotation, and zoom by scrolling, which changes the scale. The code uses D3’s `geoOrthographic`, `geoPath`, `geoGraticule`, `drag`, and `zoom` APIs, with TopoJSON data loaded from the visionscarto-world-atlas.

CCurran Kelleher

86% match

Loading thumbnail…

Fork of Globe with Panning & Zooming

This example shows an interactive orthographic globe of the world, rendered with D3’s `geoOrthographic` projection. Users can pan by dragging and zoom with the mouse wheel. The map displays country boundaries and a graticule from TopoJSON data loaded from the VisionsCarto world atlas. D3’s `drag` and `zoom` behaviors update the projection’s rotation and scale, and the code also demonstrates styling the sphere outline and adding city markers.

SShaik Rizwana

86% match