Rotating Globe

100%

Rotating Globe

✓ Published0🌍 Public

AAbhishekJha1994Outlook

Last edited Dec 4, 2020

Created on Dec 4, 2020

A rotating orthographic globe displays Earth's landmasses in sky blue against a black background, with graticule lines and interactive country names on hover. The rotation is driven by a `d3.timer` that continuously updates the projection's rotation angles, while `d3.geoOrthographic` and `d3.geoPath` render the sphere and features. World map data comes from the `world-atlas` package, loaded via `d3.json` and `d3.tsv`, with country names built into a lookup table. The visualization uses SVG for rendering within a `d3` framework.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

91% match

Loading thumbnail…

Rotating Globe

This example shows a continuously rotating orthographic globe, with country outlines and a graticule drawn over a dark ocean. The globe is interactive, allowing users to pan and zoom via a d3.zoom handler that applies a transform to the SVG group. The rotation is driven by a d3.timer that updates the d3.geoOrthographic projection’s rotation, while d3.geoPath renders the sphere, graticule, and land masses from World Atlas TopoJSON and TSV data. The visualization uses SVG with hover highlights on countries.

Ddarinadii11

89% match

Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This interactive globe visualizes world countries using an orthographic projection that continuously rotates over time. The example renders landmasses in light green with hover highlighting, displays graticule meridians, and includes a blue ocean sphere. It loads geographic data from the world-atlas package, which provides both GeoJSON and TSV country name lookups. Using d3.geoOrthographic, d3.geoPath, and d3.geoGraticule functions, the globe animates via d3.timer, rotating the projection's horizontal axis while maintaining a fixed vertical tilt, with zoom support integrated through d3.zoom.

GGabrz

89% match

Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This example shows a rotating orthographic globe, with land masses rendered in light green against a black background. Country names appear as hover tooltips. The globe rotates continuously based on an elapsed time timer, with the projection's rotation updated accordingly. D3's `geoOrthographic` projection, `geoPath`, and `geoGraticule` are used to define the map, while land data comes from the `world-atlas` package. The visualization uses SVG rendering and a zoom interaction, and displays a graticule overlay.

Nnouralkhoury

89% match

Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This interactive visualization presents a rotating orthographic globe that continually spins on a tilted axis. The world’s landmasses, drawn in light green with dark borders, are accompanied by a graticule grid of meridians and parallels. The globe supports zooming via the d3.zoom behavior, while d3.timer drives the rotation by updating the d3.geoOrthographic projection’s rotation parameters. Country data comes from the world-atlas TopoJSON files, with names appended as SVG title tooltips; hovering highlights individual countries in red.

Zzahra929

87% match

Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This example demonstrates an interactive orthographic globe that rotates continuously, with countries rendered in light green and highlighted red on hover. The visualization shows land masses, a graticule grid, and an ocean sphere against a black background, with zooming enabled. It uses D3 v5 and TopoJSON, applying d3.geoOrthographic and d3.geoPath to project world data from the world-atlas 50m dataset. A d3.timer drives the rotation by updating the projection’s rotation, while zoom behavior transforms the globe group. Country names are displayed via SVG title elements.

Zzahra929

87% match