Skip to main content
SimilarExport ZIP
100%

Interactive Stereographic

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Sep 21, 2012

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.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

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
89% match
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
86% match
Loading thumbnail…

Stereographic

A world map is displayed using the stereographic projection, showing landmasses in dark gray and country boundaries in white over a graticule grid. The projection rotates the globe by -20 degrees longitude and clips the view to a square. Built with D3 v3, the example uses `d3.geo.stereographic`, `d3.geo.path`, and `d3.geo.graticule`, rendering SVG paths from TopoJSON world data. The graticule is drawn beneath the land and boundary layers.

Mmbostock
85% match
Loading thumbnail…

Cylindrical Stereographic

A world map is rendered using the cylindrical stereographic projection, showcasing global landmasses and country boundaries over a graticule grid. The visualization uses the `d3.geoCylindricalStereographic` projection from the d3-geo-projection plugin, with `d3.geoPath` drawing the geographic features. Land areas are filled dark, while country borders appear as white lines, and the sphere outline is traced in black. The map is built from TopoJSON world data loaded via `d3.json`, with geographic features extracted using the `topojson.feature` and `topojson.mesh` APIs.

Mmbostock
81% 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
79% 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
78% 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
77% match
Loading thumbnail…

Equirectangular Fisheye

An interactive world map applies fisheye distortion to an equirectangular projection, magnifying countries and graticules near the cursor while compressing them elsewhere. The distortion follows mouse or touch movement, recentering the projection on the pointer. The example uses D3 v3’s `d3.geo.path` and `d3.geo.projectionMutator` with custom `fisheye` functions, rendering to a Canvas 2D context with `clearRect`. It loads TopoJSON land and boundary data from the world-110m dataset, drawing land, country borders, and a graticule with distinct stroke styles and alpha values.

Mmbostock
77% match