Skip to main content
SimilarExport ZIP
100%

Fork of D3 Course 7: World Map - Rotating Globe

✓ Published0🌍 Public
KKikkolatsch
Last edited Aug 5, 2021
Created on Aug 5, 2021

This example displays an interactive orthographic globe that automatically rotates over time. It renders world land masses, country boundaries, and a graticule grid using D3’s `geoOrthographic` projection and `geoPath`. The globe’s rotation is driven by a `d3.timer`, and users can pan and zoom via the `d3.zoom` behavior. Hovering highlights countries with a title tooltip. Data comes from the World Atlas TopoJSON and TSV files, with country names matched by ISO numeric codes.

AI-generated description

Data Visualization with D3 course; World Map (Rotating Globe)

MIT Licensed

Similar vizzes

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

D3 Course 7: World Map - Rotating Globe

This example displays an orthographic world map that rotates continuously on a black background, showing country boundaries and graticule lines. Using D3 v5, it combines `geoOrthographic`, `geoPath`, and `geoGraticule` to project and render geographic features, with a `timer` driving the rotation. Land masses are colored light green and highlight red on hover, with country names from a TSV lookup. The map uses TopoJSON data from world-atlas and supports zooming via d3.zoom.

SSuman Choudhary
91% 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
88% 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
87% match
Loading thumbnail…

Fork of Globe Rotation

This example shows an interactive orthographic world map that users can drag to rotate, with the globe responding fluidly to pointer movement. The visualization renders country boundaries and graticules using React and D3’s `geoOrthographic` projection, while `geoPath` draws the sphere and grid lines. Drag interactions are handled with D3’s `drag` event system and the `versor` library, which computes quaternion rotations to update the projection’s rotation state via `setRotation`. The map’s data comes from the `world-atlas` TopoJSON files (110m and 50m resolutions), loaded asynchronously with D3’s `json` and converted to GeoJSON features using `topojson.feature`.

AAnujbhatt26
87% match