Mars on a WebGL globe

100%

Mars on a WebGL globe

✓ Published0🌍 Public

Last edited Oct 5, 2019

Created on Sep 8, 2016

This interactive visualization presents a rotating Mars globe rendered on a canvas using WebGL, with the planet’s surface displayed as a color mosaic from USGS imagery. Users can drag to spin the globe, which is overlaid with white markers, semi-transparent polygons, and red links depicting mission-related paths and regions. The implementation relies on D3 v5, including `d3.geoPath` and its projection tools, to compute the orthographic projection and mouse event handling. A custom WebGL fragment shader performs the inverse projection and pixel blending directly on the GPU, while SVG layers for polygons, links, and mission highlights sit atop the canvas.

AI-generated description

Preparatory work for <a href="http://bl.ocks.org/Fil/1c2f954201523af16280db018ddd90cc">Missions to Mars</a>.

Problems solved:

-- invert geoOrthographic (instead of geoStereographic).

-- what to do for pixels outside the globe

-- white artifacts on the boundary of the jpg image (they were on the original image!)

-- upgrade to d3 v4.

-- made sure the image's center has lonlat = [0,0]

-- got rid of the pesky dot in the center on iPhone (reported by Harry Stevens)

Forked from @mbostock's Milky Way block. License GPL-3.

Image: <a href="http://astrogeology.usgs.gov/search/details/Mars/Viking/MDIM21/Mars_Viking_MDIM21_ClrMosaic_global_232m/cub">USGS</a>.

mit Licensed

Similar vizzes

Loading thumbnail…

Missions to Mars Urquhart Graph

This interactive visualization maps the locations of Mars lander missions on a globe, overlaying a red Urquhart graph derived from the landing sites’ Voronoi diagram. Moving the cursor selects the nearest mission, causing its Voronoi cell to highlight and radiate green lines outward. The globe is rendered via WebGL with a shader for orthographic projection, using a USGS Viking mosaic texture. The graph is computed with `d3.geoVoronoi`, and the mission data comes from Ryan Hodges’ GeoJSON dataset.

PPhilippe Rivière

78% match

Loading thumbnail…

Final Project

This visualization displays the landing sites of successful Mars landers on an interactive globe, projected using an orthographic projection with overlaid SVG markers. The map supports drag-to-rotate and scroll-to-zoom interactions, with tooltips showing each site’s name on hover. It renders the rotating globe’s shaded surface via Canvas and the site markers as SVG paths using `d3.geoPath`, while `d3.drag` and `d3.zoom` handle the gestures. The underlying GeoJSON data for landing coordinates comes from a remote JSON file, and the orthographic rotation uses the Versor library.

Aaniosindustries

77% match

Loading thumbnail…

Globe project

This globe visualization, rendered with D3 v4 and Three.js, presents an interactive Earth with countries, graticules, and labeled points of interest. Built from a fork of earthjs’s block, it combines SVG, canvas, and WebGL for smooth rotation and zoom, with hover tooltips for countries and dots. A subtle gradient ocean and interactive land paths highlight geographic features, while CSS transitions provide visual feedback on hover.

EEPBAH

73% match

Loading thumbnail…

This Is a Globe in d3.v4

A continuously rotating orthographic projection of the world map, rendered as a spinning globe on a Canvas. The animation uses `d3.geoOrthographic` with a clip angle to show only the visible hemisphere, while `d3.geoPath` draws the land features from a TopoJSON world dataset. The rotation is driven by `d3.timer`, updating the projection’s rotation angle based on elapsed time. A static circle outlines the globe’s edge, with the map redrawn and cleared each frame.

PPhilippe Rivière

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

71% match

Loading thumbnail…

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

Mmbostock

70% match

Loading thumbnail…

rotatable globe

A rotatable globe displays Earth’s continents and oceans, with animated color-coded pings appearing at random latitude and longitude coordinates. The globe auto-rotates around its vertical axis using a custom `autorotate` plugin that updates the projection’s rotation each frame. Built with React, the visualization uses D3 v5’s projection and path APIs, TopoJSON for world-110m-withlakes data, and the Canvas API for rendering. Users can drag to pause rotation and zoom via the Planetary.js-compatible drag and zoom plugins, with support for high-density displays.

CChase Hall

70% match

Loading thumbnail…

This Is Not a Globe

This visualization presents a stylized, rotating globe built from world land boundaries using an equirectangular projection. The land data is drawn onto a circular canvas clip, with two offset copies of the map scrolling horizontally to create the illusion of continuous rotation. The code uses the D3.js `d3.geo.equirectangular` projection, `d3.geo.path`, and Canvas `context` APIs, driven by a timer to update the animation. The world-110m GeoJSON dataset provides the geographic features, and the animation simulates a sphere while the actual projection remains flat.

Mmbostock

70% match