D3 map drag demo

100%

D3 map drag demo

✓ Published0🌍 Public

Last edited Jan 18, 2021

Created on Jan 18, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Fork of D3 map drag demo

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.

RrayaneB0t

92% match

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

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

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

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

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

89% match

Loading thumbnail…

Globe Rotation

This example uses a D3 orthographic projection to render a rotating globe, showing country boundaries and a semi-transparent graticule over a blue sphere. A user can drag to rotate the globe, with the rotation state updated via a custom `versorDrag` handler that leverages the `versor` library for quaternion-based rotation. Geographic data comes from the world-atlas TopoJSON files (110m and 50m resolution) loaded through `d3.json` and converted to features with `topojson.feature`. The visualization is built as a React component using SVG, with the drag interaction managed through D3’s `drag` and `geoPath` methods.

MMarco Costa

86% match