Skip to main content
100%

Orthographic Globe

✓ Published0🌍 Public
Aapratt2003
Last edited Oct 30, 2017
Created on Oct 30, 2017

This interactive visualization presents an orthographic (globe) projection of world landmasses using the D3 v4 library. Users can pan the globe by dragging with the mouse, which adjusts the projection’s rotation based on pointer movement, and zoom by scrolling, which scales the projection. The map is rendered as SVG from TopoJSON world atlas data.

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

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/4f4c6ef5dde876fca80906d5e5c13344'>Orthographic Zoom I</a>

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

Orthographic

This example shows a globe rendered with the orthographic projection, displaying landmasses and country boundaries over a graticule, all clipped to a sphere. The visualization uses D3 v3’s `d3.geo.orthographic` for projection, `d3.geo.path` for drawing, and `d3.geo.graticule` for the grid. Land and boundary data come from a TopoJSON world file (world-50m), processed with `topojson.feature` and `topojson.mesh`. The sphere is drawn twice: once as a black stroke and once as a white fill, with the land and boundaries layered in between.

Mmbostock
88% match
Loading thumbnail…

Satellites Projection DRAFT

This interactive visualization displays a globe with an orthographic projection, showing Earth's landmasses as black shapes on a white sphere. Users can drag to rotate the globe, with the rotation implemented using versor mathematics for smooth, accurate quaternion-based navigation. The code uses d3.geoOrthographic, d3.geoPath, and Canvas rendering to draw the sphere and land features from TopoJSON world-atlas data. A satellite velocity calculation appears in the corner, though it is computed but not visually represented on the globe. The example is a modified version of Mike Bostock’s Interactive Orthographic block.

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

Globe

This example shows a globe rendered with an orthographic projection, displaying the world’s landmasses in steelblue against an empty background. The visualization draws geographic features using D3 v4’s `d3.geoOrthographic` and `d3.geoPath` APIs, with map data loaded from the `world-atlas` TopoJSON dataset via `d3.json` and `topojson.feature`. A text element initially appears with an empty value before the map loads. The code sets the projection scale and translate to center the globe, then appends SVG paths for each land feature.

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

Rotating Globe

A rotating orthographic globe displays world landmasses and graticule meridians in SVG. The Earth spins continuously via a d3.timer that updates the d3.geoOrthographic projection’s rotation, with d3.geoPath rendering the geographic features from TopoJSON world-atlas data. A hover effect darkens countries, while a static color legend lists continents. Zoom and pan are supported through d3.zoom, with the globe group transformed on user input.

Nnouralkhoury
84% match