Fork of D3 map drag demo

100%

Fork of D3 map drag demo

✓ Published0🌍 Public

Last edited Mar 12, 2023

Created on Mar 12, 2023

This example shows an interactive orthographic globe rendered with SVG, where users can drag to rotate the Earth and see country boundaries and graticule lines. The code uses `d3.geoOrthographic` for projection and `d3.geoPath` to draw geographic features from TopoJSON data sourced from the world-atlas package. Drag events update the projection’s rotation, while zoom is handled via `d3.zoom`. Country names are loaded from a TSV file and displayed as tooltips using SVG `<title>` elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 map drag demo

An interactive orthographic globe displays country boundaries from the World Atlas TopoJSON dataset, rendered as SVG paths via `d3.geoPath` with a `d3.geoOrthographic` projection. Users drag to rotate the globe, which updates the projection’s rotation based on the drag event’s delta and the current scale. A graticule overlay and zoom via `d3.zoom` complement the interaction, while hovering reveals country names from a TSV lookup table. Clicking a country logs its name to the console.

KKikkolatsch

94% match

Loading thumbnail…

Fork of D3 map drag demo

An interactive orthographic globe displays world countries as colored paths, draggable via mouse to rotate the projection. Clicking a country logs its name to the console, while hovering reveals tooltips with country names from the world-atlas TSV file. The visualization uses D3 v5’s `d3.geoOrthographic`, `d3.geoPath`, `d3.drag`, and `d3.zoom`, with TopoJSON data rendered as SVG paths. A graticule and sphere outline provide geographic context, and country fill colors change on hover.

Vvigneswaran009

93% match

Loading thumbnail…

Fork of D3 map drag demo

This interactive globe displays world countries as clickable paths on an orthographic projection, with hover tooltips showing country names from the World Atlas TopoJSON dataset. Users can rotate the sphere by dragging, which adjusts the projection’s rotation via d3.drag and d3.geoPath, while a graticule and sphere outline provide spatial reference. A d3.zoom transform also pans and scales the entire SVG group, and country fill changes on hover through CSS.

AAndre J Denais

93% match

Loading thumbnail…

Fork of D3 map drag demo

An interactive orthographic projection of the world map that users can rotate by dragging. The visualization displays country boundaries and graticules as SVG paths, with hover highlighting and tooltips showing country names. It uses D3 v5’s `d3.drag` and `d3.zoom` for interaction, `d3.geoOrthographic` and `d3.geoPath` for projection and rendering, and TopoJSON with world atlas data for geography.

TTacue

93% match

Loading thumbnail…

D3 map drag demo

This example presents an interactive orthographic globe rendered with SVG. Users can click and drag to rotate the projection, which dynamically updates the graticule and country boundaries. The visualization uses d3.geoOrthographic, d3.geoPath, d3.zoom, and d3.drag to handle the interaction. Country polygons come from the world-atlas TopoJSON dataset, with names from the accompanying TSV file displayed as tooltips.

JJacob Philpott

92% match

Loading thumbnail…

Fork of D3 map drag demo

This interactive orthographic globe displays country borders draped over a sphere, with the map rendered as SVG paths. Clicking a country logs its name to the console based on data from a world-atlas TSV file, while hovering highlights the country. A graticule and sphere provide context. Users can drag to rotate the globe, which dynamically redraws all paths using `d3.geoPath` and updates the projection, and a `d3.zoom` interaction applies transformations to the group.

Aamanoakane

92% match

Loading thumbnail…

D3 map drag demo

This demo displays an interactive orthographic globe where users can click and drag to rotate the Earth, with country boundaries rendered as SVG paths and tooltips revealing country names on hover. The sphere, graticule, and countries are drawn using d3.geoPath with a d3.geoOrthographic projection, while rotation is handled manually through d3.drag events that adjust the projection’s rotate values. Country geometries come from the world-atlas TopoJSON dataset (50m resolution) paired with a TSV file for name lookups, and the visualization also supports d3.zoom for additional transformations.

GGlebenator

92% match

Loading thumbnail…

Fork of d3map

This interactive globe visualizes country-level data from a TopoJSON world atlas. Users can drag the globe horizontally to rotate it, and hovering over a country updates an information panel showing its name. Built with d3-geo projections and d3-drag, the visualization uses an orthographic projection rendered as SVG paths, with d3.geoPath generating the country outlines. The rotation logic is computed directly from mouse coordinates rather than using versor-based dragging.

Nnstafford

88% match