Fork of d3map

100%

✓ Published1🌍 Public

Last edited Jun 23, 2021

Created on Jun 7, 2021

Forked from 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.

AI-generated description

D3 map tutorial

So far its working!!!

MIT Licensed

Similar vizzes

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

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

90% match

Loading thumbnail…

Fork of Fork of ice8

This interactive globe uses D3’s geo projections (d3.geoOrthographic, d3.geoMercator, d3.geoAlbersUsa) and d3.geoPath to render world country boundaries from TopoJSON. Users can drag to rotate the orthographic view, click a country to switch between projections, and zoom with d3.zoom. Country names come from a TSV dataset, and graticules are drawn via d3.geoGraticule. The visualization animates projection changes with SVG transitions.

MMgk1255

89% match

Loading thumbnail…

Fork of Fork of D3 Starter

This interactive map displays country boundaries with colors representing continents, using an orthographic projection that rotates as the user drags the globe. The visualization loads world-atlas data from TSV and TopoJSON files, then fixes specific country discrepancies before rendering. It uses `d3.geoPath`, `d3.geoOrthographic`, `d3.zoom`, and `d3.drag` for interaction, with continent colors assigned via `d3.scaleOrdinal` from the Tableau10 scheme. Hovering highlights a country in red, while the title element shows the country name and index.

IIgor Bojković

89% match

Loading thumbnail…

Fork of Fork of Fork of Fork of World Map

This interactive world map combines country polygons from the World Atlas TopoJSON dataset with TSV country names. Using d3.geoPath, it renders an orthographic projection of the globe, allowing users to drag to rotate the projection, and click a country to switch between Mercator and orthographic views. The visualization employs d3.geoGraticule, sphere paths, and a zoom feature.

DDivyaVellanki

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

88% match