Skip to main content
SimilarExport ZIP
100%

Orthographic

✓ Published0🌍 Public
SStephen
Last edited Nov 1, 2017
Created on Nov 1, 2017

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.

AI-generated description

The orthographic projection is available as d3.geo.orthographic. See also the interactive version, the rotating versions and the animated world tour.

gpl-3.0 Licensed

Similar vizzes

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
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 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

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…

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

Orthographical World Map

This example shows an interactive orthographic projection of the world map, where each country is rendered as an orange SVG path with black borders and darkens on hover. The visualization uses D3 v5’s `geoOrthographic` projection with `geoPath` to draw country boundaries, and TopoJSON’s `feature` method to extract geometries from the world-atlas 110m dataset. Country names are joined from an accompanying TSV file and displayed via SVG `<title>` tooltips.

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

Azimuthal (Orthographic) Projection

This visualization displays world country boundaries using an azimuthal orthographic projection, creating a globe-like view with a 90-degree clip angle. The map renders as SVG paths with gray fills and white strokes. The code loads geographic data from countries.json and projects it using d3.geo.orthographic() and d3.geo.path() from D3 v3.

Mmbostock
81% match