Interactive Orthographic

100%

Interactive Orthographic

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Sep 27, 2012

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

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Interactive Gnomonic

An interactive map renders the world in a gnomonic projection, a perspective view where great circles appear as straight lines. Moving the mouse over the SVG scene reorients the projection’s center by rotating it based on the cursor’s position, updating the displayed landmasses. The visualization uses d3.geo.gnomonic and d3.geo.path to draw the topojson world-110m data, with d3.scale.linear mapping pixel coordinates to longitude and latitude for rotation.

Mmbostock

89% match

Loading thumbnail…

Interactive Stereographic

An interactive stereographic projection of world landmasses responds to mouse movement by recentering the map on the cursor’s geographic coordinates. The visualization uses D3 v3’s `d3.geo.stereographic` projection with a clip angle of 125 degrees, updating the path geometry via `projection.rotate` and `d3.geo.path` on every mousemove. It renders territory from a TopoJSON world-110m dataset, loaded via `d3.json`, as SVG paths that are continuously redrawn to reflect the shifting pole of projection.

Mmbostock

89% match

Loading thumbnail…

Orthographic Zoom I

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.

CCurran Kelleher

85% match

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

85% match

Loading thumbnail…

Rotating Orthographic

An orthographic projection of the world rotates continuously, showing a dark outline of the continents against a circular boundary. The rotation is driven by a timer that recalculates the projection’s center based on elapsed time and a fixed velocity. The example uses `d3.geo.orthographic()`, `d3.geo.path()`, and `topojson.feature()` to render the land from a `world-110m.json` dataset as SVG. The code also applies a 90-degree clip angle and updates the path’s `d` attribute on each tick, with styling from a CSS circle element.

Mmbostock

84% match

Loading thumbnail…

Untitled

This interactive orthographic globe displays world landmasses, graticules, and city labels with mouse-controlled rotation. It uses D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path` to render SVG, with TopoJSON world-110m data for land. A `places.json` dataset adds point markers and text labels for cities like San Francisco and Kiev. Radial gradients simulate ocean shading, a drop shadow, and globe highlight, while mouse drag rotates the projection and reposition labels.

KKikkolatsch

84% match

Loading thumbnail…

World Map

This example presents an interactive orthographic world map that automatically rotates over time. The visualization uses D3’s `geoOrthographic` projection and `geoPath` to render continents and graticules as SVG, with country data from the world-atlas TopoJSON and TSV files. Users can zoom and pan the globe via `d3.zoom`, while hovering over landmasses highlights them in yellow. The rotation is driven by a `d3.timer` that continuously updates the projection’s rotation.

Ssaijahnaviappineni

83% match

Loading thumbnail…

Orthographical World Map

This example shows an interactive orthographic projection of the world map, where each country is rendered as an orange SVG path with black borders and darkens on hover. The visualization uses D3 v5’s `geoOrthographic` projection with `geoPath` to draw country boundaries, and TopoJSON’s `feature` method to extract geometries from the world-atlas 110m dataset. Country names are joined from an accompanying TSV file and displayed via SVG `<title>` tooltips.

Tthanhtrant219

83% match