Skip to main content
SimilarExport ZIP
100%

Interactive Gnomonic

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

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.

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

Gnomonic

This example shows the world map projected using the gnomonic projection, where great circles appear as straight lines and distortion increases toward the edges. The map is clipped at a 90-degree angle, displaying landmasses in dark gray with white country boundaries over a graticule grid. The visualization uses D3 v3’s `d3.geo.gnomonic` projection and `d3.geo.path` to render SVG paths from TopoJSON world data, with the graticule drawn via `d3.geo.graticule`. The code sets projection scale, translation, and precision before loading the `world-50m.json` file.

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

Interactive Map

An interactive world map rendered as an SVG using D3.js, with pan and zoom controls. The map displays countries as gray polygons with dark borders, and allows users to click on a country to highlight it and display its label. It uses d3.geoEquirectangular for projection, d3.geoPath for rendering, and the d3.zoom behavior for interactive navigation. The map data comes from a TopoJSON file, and the visualization also responds to window resizing by recalculating zoom limits and centering the view.

CChooo4u
79% match
Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Ggilbster
78% match
Loading thumbnail…

Interactive Map with d3.js

This example shows an interactive world map rendered as SVG, with countries colored dark gray on a light sphere and highlighted in red on hover. The visualization uses d3.geoEqualEarth projection with d3.geoPath to draw country boundaries from TopoJSON data, while country names are loaded from a TSV file and displayed as tooltips via SVG title elements. Pan and zoom are enabled through d3.zoom, with scale limits between 1x and 8x, and the map renders using the world-atlas dataset at 110m resolution.

MMaciek Sitkowski
78% match
Loading thumbnail…

world Map

This visualization displays an interactive world map using a simple equirectangular projection. Countries are rendered as SVG paths with light green fills and indigo outlines, with hover states that turn them maroon. The map supports pan and zoom interactions. The code uses d3.geoEquirectangular, d3.geoPath, and d3.zoom, loading GeoJSON data from the world-atlas TopoJSON file via topojson.feature.

Mmandadi1999
78% match