WorldConnectionMap
ChartsGreat-circle arcs between origin / destination coordinate pairs.
Great-circle arcs on a world map. Each arc resolves from [longitude, latitude] origin to destination and animates its draw-in on mount. Pair it with a Neo-Green stroke to visualise flows between tech hubs, trade routes, or user networks.
Import
import { WorldConnectionMap } from "nosible-ux"Examples
Tech-hub connections
Static arcs (no animation)
Accessibility
Motion respects prefers-reduced-motion — when enabled the draw-in animation is skipped. Provide a descriptive aria-label summarising origin → destination semantics. Avoid encoding critical information only in stroke-width; provide a key or table for assistive users.
Props
| Name | Type | Default | Description |
|---|---|---|---|
animate | boolean | undefined | — | Animate arc draw-in on mount. Default: `true`. |
arcs | ArcDatum[] | — | |
aria-label | string | undefined | — | Accessible label forwarded to the `role="img"` wrapper. |
duration | number | undefined | — | Total draw-in duration for one arc in ms. Default: `900`. |
height | number | undefined | — | |
projection | WorldProjectionKind | undefined | — | |
samples | number | undefined | — | Number of samples along each arc. Default: `64`. |
strokeColor | string | undefined | — | Stroke colour for arcs. Default: Neo Green. |
strokeWidth | number | undefined | — | Stroke width for arcs. If `arcs[].value` present, used as max; else fixed. Default: `1.5`. |
width | number | undefined | — | |
withLabels | boolean | undefined | — | Show labels at each endpoint. Default: `true`. |