Skip to main content
SimilarExport ZIP
100%

Orthographic Shading

✓ Published0🌍 Public
Mmbostock
Last edited Dec 20, 2022
Created on Jul 2, 2012

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.

AI-generated description

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

Part 3 of 3.

  1. Orthographic Grid
  2. Orthographic Clipping
  3. Orthographic Shading
gpl-3.0 Licensed

Similar vizzes

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
91% match
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
88% 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
87% 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
86% 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
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
83% 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
82% match
Loading thumbnail…

Orthographic to Equirectangular

This example animates the transition between two map projections: starting with an orthographic view of the globe and morphing into a flat equirectangular projection. A red equator line and gray graticule remain visible throughout, highlighting how geographic coordinates shift between the two representations. The animation runs continuously, cycling through the interpolation in both directions. The implementation uses a custom projection function that blends the output coordinates of `d3.geo.orthographic` and `d3.geo.equirectangular`, driven by a transition tween that updates the projection’s alpha parameter and redraws SVG paths rendered by `d3.geo.path`.

Mmbostock
81% match