arc

arcNode

The great-circle path between two places — the shortest route over the earth, drawn the way the earth actually is. On a mercator environment the London–Tokyo arc bends far north of the straight line between them, and that one element is the whole projection-distortion lesson. Wrap it in a cue.draw and the route traces itself along its length.

#Attributes

fromRequiredImplicitAnimatable

geo-anchor

One end: a coordinate written latitude first, or #id naming a marker in the same environment — from: #london. An anchored end FOLLOWS its marker, so an arc drawn to an animated marker moves with it. Parametised and animatable.Can be written as shorthand: arc:value

toRequiredAnimatable

geo-anchor

The other end, in the same two forms.

colourAnimatable

neutralredorangeyellowgreentealbluepurplepinkgreywhiteblack

Also written: colorThe arc's hue.

Defaultteal

widthAnimatable

number

Stroke width in pixels.

Default2

opacityAnimatable

number

How solid the stroke is, 0 to 1.

Default1

label

rich-text

Rich inline label set at the arc's midpoint.

hiddenAnimatable

boolean

Declared but not drawn. Animatable, so hidden: true !cue.to{false}(at: 2) is the overlay's reveal.

Defaultfalse

#Derived attributes

Computed while the element renders — read one with #id.name in attribute position or {{#id.name}} in prose, never set.

distanceDerived

The great-circle length in kilometres — the number the arc IS, the way an integral derives its value. Cite it in prose with {{#id.distance}}.

#Allowed in

cue { }cue.draw { }cue.trace { }cue.highlight { }cue.spotlight { }canvas.geo { }

#Examples

arc(from: #london; to: #tokyo; colour: teal)

arc#route(from: 51.47, -0.46; to: 35.55, 139.78; label: {{round(#route.distance, 0)}} km)

cue.draw{
    arc(from: 40.64, -73.78; to: 1.36, 103.99)
}(
    in: 2
    in-duration: 1200ms
)