Click and drag to create great arcs

100%

Click and drag to create great arcs

✓ Published0🌍 Public

Last edited May 19, 2017

Created on May 19, 2017

Clicking and dragging on the map generates two sets of expanding great-circle arcs, drawn in lime green and black, while a red line connects the start and end points on an equirectangular projection of the world. The visualization uses d3-geo to draw circular arcs centered on the click points, with the drag path rendered as a great circle, overlaid on topojson land and country outlines.

AI-generated description

playing around with geoCircles and then wanted to click and drag to create a great arc, so did that too.

Similar vizzes

Loading thumbnail…

Great Arc

This example visualizes a great arc between Washington, D.C. and Beijing as a red LineString on an equirectangular projection. The projection is rotated to keep the entire arc visible without interruption. It also renders a graticule, land masses, and country boundaries from a TopoJSON world-50m dataset. The code uses d3.geo.equirectangular, d3.geo.path, d3.geo.graticule, and topojson.feature to draw the SVG elements.

Mmbostock

74% match

Loading thumbnail…

Click to select with D3.js!

This example displays a world map using an equirectangular projection, with each country rendered as a green SVG path with a black stroke. The data is loaded from the world-atlas TopoJSON dataset and converted to GeoJSON features via `topojson.feature`. The visualization relies on D3 v6’s `d3.json`, `d3.geoEquirectangular`, and `d3.geoPath` to generate the map geometry, and appends all paths to the SVG container at once. No click interaction or selection behavior is implemented beyond the title’s suggestion.

LLidiamir

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

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

73% match

Loading thumbnail…

Drawing a box

This interactive visualization displays a graticule, country boundaries, and a red rectangular region on an orthographic projection of the Earth. Users can drag to rotate the globe, using the d3.drag module to adjust the projection’s rotation, revealing the selected bounds. Built with d3-geo-projection.v3, it renders via SVG using d3.geoPath and d3.geoGraticule, with country data sourced from the world-atlas TopoJSON. The d3.zoom module enables panning and scaling of the entire graphic.

GGlebenator

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

71% match

Loading thumbnail…

world Map

This visualization displays an interactive world map using a simple equirectangular projection. Countries are rendered as SVG paths with light green fills and indigo outlines, with hover states that turn them maroon. The map supports pan and zoom interactions. The code uses d3.geoEquirectangular, d3.geoPath, and d3.zoom, loading GeoJSON data from the world-atlas TopoJSON file via topojson.feature.

Mmandadi1999

71% match

Loading thumbnail…

Let's make a map with D3.js!

This example presents a static world map rendered with a light green fill on a dark blue background. It uses the equirectangular projection to display country boundaries as SVG paths, with data from the world-atlas TopoJSON dataset. The code builds the visualization with D3 v5’s `geoPath` and `geoEquirectangular` functions, alongside TopoJSON’s `feature` method to convert the TopoJSON topology into GeoJSON features. Each country is appended as a separate `path` element to the SVG canvas.

AArriannePandaraoan

71% match