Skip to main content
SimilarExport ZIP
100%

D3 map drag demo

✓ Published10🌍 Public
GGlebenator
Last edited Apr 2, 2021
Created on Jan 18, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

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

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

Earth globe

An interactive orthographic globe renders world countries as SVG paths using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with land polygons from a TopoJSON `world-110m.json` file. Users can drag to rotate the globe via `d3.behavior.drag`, which adjusts the projection’s rotation, while hovering over a country displays its name in a tooltip. A dropdown menu, populated from a TSV file of country names, lets users select a country; the globe then smoothly animates to center on that country’s centroid using a `d3.transition` with an interpolated rotation, and the selected country is highlighted in green.

KKoGor
85% match