Skip to main content
100%

Orthographic projection

✓ Published0🌍 Public
Aamerval
Last edited Nov 19, 2015
Created on Nov 19, 2015

This example animates an orthographic projection of the earth, with land areas colored according to median income data from AllDataTA.csv. Using D3.v3, geographic path elements are rendered in SVG and rotated smoothly over time to reveal the globe. The data values are mapped to a color scale, visually encoding regional statistics—including median income, population percentages, and density—directly onto the spherical map. The animation demonstrates how orthographic projection can be used to explore spatial data distributions across the earth's surface.

AI-generated description

Similar vizzes

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

Orthographic Globe

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.

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

D3 - Maps

A rotating orthographic globe displays world landmasses as stroked vector outlines on a Canvas element. D3’s `d3.geoOrthographic` projection and `d3.geoPath` render both the geographic features and a graticule, with the rotation updated by `projection.rotate` inside a `setInterval` loop. The geographic data comes from a remote TopoJSON-like GeoJSON file, while the animation runs on a 960×800 canvas.

SSubhendu Karmakar
77% match
Loading thumbnail…

Orthographic Labels

An orthographic projection of the world rotates slowly while displaying country borders, a graticule, and light-blue ocean labels as filled polygons. The labels are generated from GeoJSON data, created by converting text paths on a Mercator projection to geographic coordinates. The visualization uses canvas rendering with D3 v4 and TopoJSON land data, animating the sphere continuously.

Aandrew-reid
76% match