Skip to main content
SimilarExport ZIP
100%

Orthographic Clipping

✓ Published0🌍 Public
Mmbostock
Last edited Dec 20, 2022
Created on Jun 29, 2012

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.

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.

gpl-3.0 Licensed

Similar vizzes

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

Rotating Orthographic

This rotating orthographic projection displays a graticule and the equator as animated SVG paths on a sphere. It uses the d3.geo.orthographic projection with a rotating view, updating the projection’s rotation based on a timed loop. The sphere, graticule, and equator are drawn as SVG paths via d3.geo.path, with the animation driven by d3.timer incrementally adjusting the rotation angles.

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…

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…

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
82% match