Orthographic Zoom I

100%

Orthographic Zoom I

✓ Published0🌍 Public

Last edited Oct 4, 2017

Created on Sep 26, 2017

This example presents an interactive orthographic projection of the world, allowing users to rotate the globe by dragging and zoom in and out with the mouse wheel. It visualizes land polygons from the `world-110m` TopoJSON dataset. The code uses `d3.geoOrthographic` and `d3.geoPath` to render shapes, with `d3.drag` handling rotation and `d3.zoom` adjusting the projection scale.

AI-generated description

A first attempt at panning and zooming with Orthographic projection. See also Orthographic Zoom II.

Uses world-110m geographic shapes from TOPOJSON World Atlas.

Inspired by

mit Licensed

Similar vizzes

Loading thumbnail…

Orthographic Zoom III

This interactive globe displays country boundaries using an orthographic projection, panning and zooming smoothly with the mouse. During interaction, it renders the lower-resolution 110m world-atlas dataset, then switches to the higher-resolution 50m dataset once the motion stops for crisp detail. Built with D3 v4, it uses `d3.geoPath` and TopoJSON to project geographic features, with drag and zoom behaviors from `d3.drag` and `d3.zoom` controlling the globe's rotation and scale.

CCurran Kelleher

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

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

86% match

Loading thumbnail…

Interactive Orthographic

This interactive orthographic map displays a world landmass that the viewer can rotate by moving the mouse. As the cursor moves, the projection’s center re-orients to the new longitude and latitude, redrawing the SVG paths in real time. Built with D3 v3, it uses `d3.geo.orthographic`, `d3.geo.path`, and a linear scale to map pixel coordinates to degrees. The geographic data comes from a TopoJSON file (`world-110m.json`) loaded via `d3.json`, with features extracted using `topojson.feature`.

Mmbostock

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

85% match

Loading thumbnail…

Global zoom pan

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.

SSamuelRiversMoore

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

84% match

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

83% match