Manual
Overview
Language
IntroductionScenes & structureText & inlineGraphsCode panesAnimationDataReuse & logicExpressions & parameters
Elements
Text
ParagraphHeading 1Heading 2Heading 3Heading 4Unordered ListDivider
Media
ImageTableEquation
Callouts
NoteDefinitionExampleTask
Graph
GraphLinePolygonCurveIntegralScatterHistogramPointSegmentVectorCircleSquareRectangleTriangleStarDiamondHexagonTextAxis labelAxis BraceFitResidualsContourHeatmapParameter
Code
Code canvasLines
Animation
CueDraw cueTrace cueHighlight cueSpotlight cueType cue
Structure
SceneStep
Reference
Internote Reference
Inline
Formatting
BoldItalicsInline CodeHighlightLink
Text colour
Red textOrange textYellow textGreen textTeal textBlue textPurple textPink textGrey text
Maths
Maths
Reference
Internote ReferenceValueConstant
Other
FootnoteIcon
Directives
DatasetIncludeConstantsTemplatePresetConditionalForIgnore
Keyframes
KeyframeZoom keyframe
Attribute types
?
  1. Elements
  2. Graph
  3. Graph

Graph

canvas.graphBlock elementGraph

A graph pane on the scene's canvas. Holds marks (scatter, curve, line, shapes…) plus the fit element; parameters are native to the surface (the fit degree and free expression parameters get controls in the pane footer). The x/y domains are animatable with !cue.to keyframes.

Attributes

titleImplicit
string
Accessible title.The head shorthand supplies it: canvas.graph:value
x-axis-label
string
Also written: x-labelX axis name.
y-axis-label
string
Also written: y-labelY axis name.
x-domain
interval
Also written: domain, x-rangeX range, e.g. [0, 10]. Derived from the data when omitted. Animatable: x-domain: [0, 5] !cue.to{[0, 10]}(at: 1; over: 800ms). For a magnification, !cue.zoom draws a box around the new window and moves the frame into it: x-domain: [0, 10] !cue.zoom{[2, 4]}(at: 2; draw: 700ms; hold: 250ms). Endpoints may use parameters — y-domain: [0, 0.46 / s] frames the pane live.
y-domain
interval
Also written: range, y-rangeY range. Derived from the data when omitted. Animatable, with !cue.to or !cue.zoom — write the same anchor on both domains and the two axes move as one window. Endpoints may use parameters — y-domain: [0, 0.46 / s] frames the pane live.
x-grid-spacing
grid-step
Also written: x-grid, x-spacingGrid step on x, or auto.
Defaultauto
y-grid-spacing
grid-step
Also written: y-grid, y-spacingGrid step on y, or auto.
Defaultauto
editable
boolean
The reader may add their own elements, and pan or zoom the frame.
Defaultfalse
interactive
boolean
Let the reader explore: scroll to zoom, drag to pan, double-click to reset — and zoom / reset controls appear in the toolbar.
Defaultfalse
show-ticks
boolean
Also written: ticksShow tick labels.
Defaulttrue
show-axes
boolean
Also written: axesShow the axes.
Defaulttrue
show-background
boolean
Also written: background, show-bg, bgMaster switch for the frame (grid, axes, ticks).
Defaulttrue
show-grid
boolean
Also written: gridShow grid lines.
Defaultfalse
grid-style
Also written: grid-typeWhat the grid is made of: 'lines' is squared paper, 'dots' steps back and lets the marks carry the picture. The -minor variants add unlabelled subdivisions between the labelled lines.
Defaultlines
continue
reference
Inherit an earlier same-type pane's state: `continue: #that-pane`.

Allowed content

Body { }
linepolygoncurvecirclesquarerectangletrianglestardiamondhexagonvectorsegmentpointtextaxis.labelscatterhistogramfitresidualscontourheatmapcuecue.drawcue.trace

Allowed in

scene [ ]

Examples

canvas.graph#fit-graph{
    scatter(points: (1, 2.0), (2, 2.4), (3, 3.1), (4, 4.8); colour: grey)
    fit(model: polynomial; degree: 1 to 4; default: 1; colour: teal)
    cue{
        residuals(of: fit; colour: orange)
    }(
        in: 1
    )
}(
    x-axis-label: x
    y-axis-label: y
)

Notes

  • A pane's own id is written on the node — `canvas.graph#projectile{…}` — and `continue:` points at it with `#projectile`.
On this page
AttributesAllowed contentAllowed inExamplesNotes
Graph · Internote