Skip to main content
100%

Orthographic Clipping

✓ Published0🌍 Public
Aaleishanelson
Last edited Jun 26, 2016
Created on Jun 26, 2016

A spinning orthographic globe displays a world map and a red point at [0°, 52°] while a graticule of latitude and longitude lines rotates with it. The projection uses `d3.geo.orthographic` with a 90° clip angle, and `d3.geo.path` renders the GeoJSON world data and graticule. A `d3.timer` continuously updates the rotation, and the red marker stays fixed relative to the globe’s surface. The map data comes from an external GeoJSON file, and the visualization uses D3 v3 with SVG.

AI-generated description

The above grid demonstrates an orthographic azimuthal projection. The lines are at uniform 10º increments of latitude and longitude.

Part 2 of 3.

  1. Orthographic Grid
  2. Orthographic Clipping
  3. Orthographic Shading

To see this technique applied to real geographic features, see the Spinny Globe example.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3021474'>Orthographic Clipping</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Orthographic Clipping

A rotating orthographic globe displays a graticule of latitude and longitude lines at uniform 10-degree increments, with a circular clipping boundary. The globe slowly spins via a d3.timer that updates the projection rotation over time. The example uses d3.geo.orthographic with clipAngle(90) and d3.geo.path to render the graticule as an SVG path, while a separate SVG circle outlines the globe’s edge.

Mmbostock
93% match
Loading thumbnail…

Orthographic Clipping

An orthographic projection of Earth’s graticule rotates slowly, with a circle marking the visible hemisphere’s boundary. The graticule lines, drawn at 10º latitude and longitude intervals, are clipped at the projection’s 90° limit, while a world map outline from a GeoJSON file is also clipped in the same way. Both the graticule and the map path animate via a timer, using `d3.geo.orthographic()`, `d3.geo.path()`, and `d3.timer` within d3.v3’s SVG rendering.

BBBischof
89% match
Loading thumbnail…

Orthographic Grid

An orthographic grid of graticule lines at 10-degree intervals rotates slowly over time, demonstrating an azimuthal projection that resembles a globe viewed from space. The visualization uses D3 v3’s `d3.geo.orthographic`, `d3.geo.path`, and `d3.geo.graticule` to render SVG paths, while a `d3.timer` continuously updates the projection’s rotation based on a fixed velocity vector. A static circle outlines the globe’s edge, and the animation shows how latitude and longitude lines curve as the view shifts.

Mmbostock
84% match
Loading thumbnail…

Orthographic Shading

An interactive orthographic projection shows Earth’s graticule as a shaded sphere rotating continuously. Latitude and longitude lines at 10° increments form the grid, which is clipped to the visible hemisphere. The animation uses `d3.geo.orthographic()` and `d3.geo.path()` to project the graticule, while a radial gradient fills a circle to simulate lighting. A `d3.timer` updates the projection rotation and the fill’s transform, altering the view over time. The SVG rendering includes subtle stroke opacity for depth.

Mmbostock
84% match
Loading thumbnail…

Rotating Orthographic

A rotating orthographic projection of the world, rendered via canvas animation, shows the globe slowly spinning as landmasses and country borders move across the sphere. The code uses `d3.geo.orthographic` with a clip angle to define the projection, `d3.geo.path` to draw land, borders, and graticule, and `d3.json` to load world-110m GeoJSON data. A timer updates the rotation angle over time, clearing and redrawing the canvas each frame.

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

Orthographic

An orthographic projection displays a hemisphere of the Earth as seen from space, centered on the equator at 90°W. The visualization uses a dark landmass, white country boundaries, and a graticule grid over a sphere outline, all rendered as SVG paths. The code applies `d3.geo.orthographic` with a clip angle and rotation to define the view, and the `d3.geo.path` API projects the topojson world data. The map updates when loading the 50m-resolution world dataset.

SStephen
83% match
Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays Earth's landmasses in sky blue against a black background, with graticule lines and interactive country names on hover. The rotation is driven by a `d3.timer` that continuously updates the projection's rotation angles, while `d3.geoOrthographic` and `d3.geoPath` render the sphere and features. World map data comes from the `world-atlas` package, loaded via `d3.json` and `d3.tsv`, with country names built into a lookup table. The visualization uses SVG for rendering within a `d3` framework.

AAbhishekJha1994Outlook
83% match