Final Project

100%

✓ Published0🌍 Public

Last edited Nov 16, 2022

Created on Nov 16, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Mars on a WebGL globe

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.

PPhilippe Rivière

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

74% match

Loading thumbnail…

GLOBE

This interactive visualization presents a rotatable 3D orthographic globe of the world using D3.js and React. Users can drag the globe to explore different regions, with rotation applied via the versorDrag helper and d3.drag. The map displays country boundaries from TopoJSON world-atlas data (110m and 50m resolutions), rendered as SVG paths with hover highlighting. A graticule overlays the sphere to show latitude and longitude lines, while the projection updates dynamically through React state and d3.geoOrthographic.

AAnujbhatt26

73% match

Loading thumbnail…

Globe Zoom - Animate

A world map rendered with SVG marks a projected globe, where graticules, landmasses, and country interiors are drawn via `d3.geoPath` and `d3.geoGraticule`. Nuclear test explosion sites, loaded from a CSV, are plotted as small circles whose positions are calculated using a Mercator projection (`d3.geoMercator`). The visualization demonstrates how multiple geographic datasets can be overlaid and interactively explored, with tooltips showing each site’s name and coordinates. The implementation uses React for state management and `d3` v3 APIs for map and projection handling.

AAbhishek Singh

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

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

72% match

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

72% match

Loading thumbnail…

Untitled

An orthographic globe projects world landmasses and graticule onto a Canvas, with countries highlighted in red on hover and named in a header. The globe auto-rotates using a d3.timer, and users can drag to spin it via versor-based quaternion rotation, pausing rotation after interaction. Data comes from the world-atlas TopoJSON and a world-country-names TSV, rendered using d3.geoPath and d3.geoOrthographic within the d3-geo library.

DDolbyref113

72% match