Arc series
Every long-haul route out of Changi
Great circles, not lines on a rectangle. The Pacific routes are cut at the antimeridian and re-enter on the left edge instead of streaking back across the map, and the flight to São Paulo sweeps south of the Cape because that genuinely is the shortest way there. Every route leaves the same airport, so the beads say which way, which is something no arc on its own can tell you.
By distance from Singapore · click to fly
Routes Singapore Changi long-haul destinations Distance computed great-circle, WGS84 mean radius Geometry Natural Earth 1:110m
Geodesic, or decorative
Three models of the same pair of points
geodesic: true is the default and follows the real great circle,
resampled densely enough to stay smooth at any zoom and split where it crosses the
antimeridian. geodesic: false is the naive alternative, a chord through
screen space: watch the Pacific routes streak back across the whole map, because a
straight line knows nothing about the edge it is crossing. curvature
bulges that chord perpendicular to itself: it looks good, it is no longer the path, so
it is off by default.
{
type: 'arc',
name: 'Great-circle distance',
data: routes, // { from, to, value: km }
geodesic: true,
width: { range: [0.6, 3.4] }, // encodes distance
colorScale: { palette: NIGHT }, // five explicit stops
endpoints: { show: true, radius: 2 },
flow: true, // beads, from -> to
}
Direction, without an arrowhead
What flow: true is doing
One dashed companion path per route, animated on its dash offset. A repeating pattern
only has to advance by one period to loop, so the duration is
spacing / speed and the length of the route never enters into it: no route
is measured, and the phase is a function of time, so panning cannot disturb it. The
beads are anchored to the ground rather than to the screen, so zooming in spreads them
out with the geography instead of fitting more of them onto the same route. Size, pace
and spacing are each bounded, at three, two and six times what they opened at, so the
far end of the camera is not blobs travelling at forty times the speed you set, nor
beads so far apart that none is on screen. They sit in a group of their own above the
routes, which keeps the only thing on the map that repaints each frame away from the
geometry that never moves. Ask for reduced
motion and the beads stay where they are and stop travelling, because a dotted route
still reads as a route.
flow: true
flow: { style: 'dash', speed: 60, spacing: 30 }
flow: { color: '#e8f4ff', size: 5, stagger: false }
flow: { scale: 'screen' } // fixed size at any zoom
Why this one is dark
The background is a design decision
A connection map is mostly ink over water, and thin bright lines resolve on dark far
better than on white: it is why every airline route map ever printed is dark.
theme.mode: 'dark' switches the map's own furniture, the legend, the
tooltip and the focus ring, and the page supplies the rest. A graticule at 20° in
5% white gives the eye a frame without competing with the routes.
theme: { mode: 'dark' },
geo: {
map: 'world/land@110m',
fill: '#1d2735',
sphere: { show: true, fill: '#0d121b' },
graticule: { show: true, step: 20,
color: 'rgba(255,255,255,0.055)' },
}