Skip to main content
SimilarExport ZIP
100%

D3 Course 7: World Map - Rotating Globe

✓ Published0🌍 Public
SSuman Choudhary
Last edited Nov 24, 2020
Created on Nov 24, 2020

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.

AI-generated description
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
94% 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
94% 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
92% 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
92% match
Loading thumbnail…

Fork of D3 Course 7: World Map - Rotating Globe

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.

KKikkolatsch
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…

D3 Course 7: World Map

This example demonstrates an interactive world map using D3 v5 and TopoJSON data from the world-atlas package. It renders countries with the Natural Earth projection via d3.geoPath, applies an ocean sphere outline, and colors landmasses light green with black strokes. The map supports panning and zooming through d3.zoom, highlights countries in red on hover via CSS, and displays country names using tooltips sourced from a TSV lookup file.

GGabrz
87% match
Loading thumbnail…

World Map

This example presents an interactive orthographic world map that automatically rotates over time. The visualization uses D3’s `geoOrthographic` projection and `geoPath` to render continents and graticules as SVG, with country data from the world-atlas TopoJSON and TSV files. Users can zoom and pan the globe via `d3.zoom`, while hovering over landmasses highlights them in yellow. The rotation is driven by a `d3.timer` that continuously updates the projection’s rotation.

Ssaijahnaviappineni
87% match