Skip to main content
100%

Orthographic Labels

✓ Published0🌍 Public
Aandrew-reid
Last edited Nov 28, 2017
Created on Nov 26, 2017

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.

AI-generated description

A quick demonstration of projected labels.

This was achieved by:

  • Creating labels in Inkscape and converting to paths
  • Overlaying labels on a Mercator Projection
  • Finding the geographic coordinates of the paths using projection.invert() and path.getPointAtDistance()
  • Creating a geojson from the converted points
  • Displaying the geojson

The base orthographic map shown here is a slight modification (moved to v4) of Mike's rotating orthographic bl.ock. The idea came from the answer here on Stack Overflow.

Why Mercator? Because lines of latitude and longitude are straight, which makes placing text easier. Placing things other than long strings of text, I'd probably use an azimuthal equidistant rotated to center the object to be projected.

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

Rotating Globe

A rotating orthographic globe displays country-level data values, with landmasses rendered in sky blue and hover states highlighted in dark blue. Using D3 v5 with `d3.geoOrthographic` and `d3.geoPath`, the projection rotates continuously via `d3.timer`, while a graticule overlays the sphere. The visualization loads world topology from TopoJSON and country names from a CSV file, with zoom support via `d3.zoom`.

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

Rotating Globe

A rotating orthographic globe displays country boundaries and graticules, with land masses that change color on hover. The visualization uses D3 v5’s `geoOrthographic`, `geoPath`, and `geoGraticule` with a timer to continuously adjust the projection rotation. World map data comes from the World Atlas TopoJSON, while country names are loaded from a TSV file. Zooming is enabled via D3’s `zoom` behavior, and all rendering uses SVG paths.

Zzahra929
80% match
Loading thumbnail…

Ocean

An orthographic globe renders the world’s oceans as a translucent blue polygon, rotating slowly to reveal the Earth’s curvature. The example highlights counterclockwise polygon winding and improved antimeridian stitching in TopoJSON, with ocean data from Natural Earth. D3’s `d3.geo.orthographic` projection, `d3.geo.path`, and a canvas context draw the sphere, graticule, and ocean, while `d3.timer` drives the animation.

Mmbostock
79% match