Diagrams

The diagram canvas element and all drawing primitives — curves, shapes, data plots, and labels

diagram

diagramalias: graph

A coordinate canvas for mathematical drawings. Place drawing primitives inside the body {}. Diagrams go in the detail panel [] of a scene, displayed alongside the narrative body.

x domain (interval; default: [-10, 10]). Horizontal range of the canvas
y domain (interval; default: [-10, 10]). Vertical range of the canvas
x-axis-label (string; default: —). Label for the x-axis
y-axis-label (string; default: —). Label for the y-axis
title (string; default: —). Title displayed above the diagram
show axes (boolean; default: true). Show x and y axes
show grid (boolean; default: true). Show the background grid
show ticks (boolean; default: true). Show axis tick marks
show background (boolean; default: true). Show the diagram background
x grid spacing (grid-step; default: auto). Grid line spacing on x-axis
y grid spacing (grid-step; default: auto). Grid line spacing on y-axis

scene{
    The parabola $y = x^2$ is symmetric about the y-axis.
}[
    diagram{
        curve(expression: x^2; colour: blue)
        point(x: 0; y: 0; colour: orange)
        text{ vertex }(x: 0.4; y: 0.3; size: 14)
    }(
        x domain: [-4, 4]
        y domain: [-1, 10]
        x-axis-label: x
        y-axis-label: y
    )
]

scene{
    The parabola $y = x^2$ is symmetric about the y-axis.
}[
    diagram{
        curve(expression: x^2; colour: blue)
        point(x: 0; y: 0; colour: orange)
        text{ vertex }(x: 0.4; y: 0.3; size: 14)
    }(
        x domain: [-4, 4]
        y domain: [-1, 10]
        x-axis-label: x
        y-axis-label: y
    )
]

Chalk

Read-only

parameter

parameteralias: param

An interactive slider that defines a variable students can manipulate. Place in the same detail [] block as the diagram. Any expression in the scene that references the variable letter updates in real time.

var (required; single-char). Variable letter (a–z)
range (parametised-interval; default: [-10, 10]). Slider range [min, max]
step (number; default: 1). Slider step size
default (number; default: 0). Initial slider value

scene{
    Explore $y = a \sin(bx)$.
}[
    parameter{
        Amplitude $a$
    }(var: a; range: [0.5, 4]; step: 0.5; default: 1)

    parameter{
        Frequency $b$
    }(var: b; range: [0.5, 3]; step: 0.5; default: 1)

    diagram{
        curve(expression: a * sin(b * x); colour: teal)
    }(x domain: [-7, 7]; y domain: [-5, 5])
]

scene{
    Explore $y = a \sin(bx)$.
}[
    parameter{
        Amplitude $a$
    }(var: a; range: [0.5, 4]; step: 0.5; default: 1)

    parameter{
        Frequency $b$
    }(var: b; range: [0.5, 3]; step: 0.5; default: 1)

    diagram{
        curve(expression: a * sin(b * x); colour: teal)
    }(x domain: [-7, 7]; y domain: [-5, 5])
]

Chalk

Read-only

curve

curve

Plots a mathematical function y = f(x) as a smooth curve. Expressions use standard math notation and can reference parameter variables.

expression (required; parametised-expression). Math expression for y as a function of x
colour (colour; default: blue). Curve colour
width (number; default: 2). Stroke width in pixels
dashed (boolean; default: false). Dashed stroke
domain (parametised-interval; default: —). Restrict the x range of the curve
range (parametised-interval; default: —). Clip the y range of the curve
arrowheads (boolean; default: true). Show arrowheads at curve endpoints

curve(expression: sin(x); colour: teal)
curve(expression: cos(x); colour: orange; dashed: true)
curve(expression: x^2; domain: [-3, 3]; colour: blue)

curve(expression: sin(x); colour: teal)
curve(expression: cos(x); colour: orange; dashed: true)
curve(expression: x^2; domain: [-3, 3]; colour: blue)

Chalk

Read-only

line

line

A polyline connecting a sequence of coordinate points. Use for data series, piecewise functions, or step functions.

data (required; parametised-coordinate-list). Coordinates, e.g. (0,0),(1,2),(2,3)
colour (colour; default: pink). Line colour
width (number; default: 2). Stroke width
interpolate (linear / step; default: linear). linear connects points directly; step draws horizontal then vertical

line(data: (0,0),(1,2),(2,1),(3,3); colour: green; width: 2)

line(data: (0,0),(1,2),(2,1),(3,3); colour: green; width: 2)

Chalk

Read-only

polygon

polygon

A filled or unfilled polygon connecting a sequence of coordinate points.

data (required; parametised-coordinate-list). Vertex coordinates
fill (boolean; default: true). Fill the interior
colour (colour; default: teal). Fill and stroke colour
opacity (number; default: 1). Opacity (0–1)

polygon(data: (0,0),(2,0),(1,2); colour: teal; opacity: 0.4)

polygon(data: (0,0),(2,0),(1,2); colour: teal; opacity: 0.4)

Chalk

Read-only

Shapes

circle, square, rectangle, triangle, diamond, hexagon, star

Fixed geometric shapes positioned at (x, y) with a given size. All share the same attribute set. Available shapes: circle, square, rectangle, triangle, diamond, hexagon, star.

x (parametised-number; default: 0). Centre x coordinate
y (parametised-number; default: 0). Centre y coordinate
size (parametised-number; default: 1). Radius or side length
colour (colour; default: purple). Shape colour
fill (boolean; default: true). Fill the interior
opacity (number; default: 1). Opacity (0–1)

circle(x: 0; y: 0; size: 2; fill: false; colour: purple)
square(x: 3; y: 1; size: 1.5; colour: teal; opacity: 0.5)
triangle(x: -2; y: 0; size: 1; colour: orange)
diamond(x: 1; y: 3; size: 1)

circle(x: 0; y: 0; size: 2; fill: false; colour: purple)
square(x: 3; y: 1; size: 1.5; colour: teal; opacity: 0.5)
triangle(x: -2; y: 0; size: 1; colour: orange)
diamond(x: 1; y: 3; size: 1)

Chalk

Read-only

vector

vector

A directed arrow from origin (x, y) in direction (dx, dy). Use for showing forces, velocity, gradients, or any directed quantity.

x (parametised-number; default: 0). Origin x
y (parametised-number; default: 0). Origin y
dx (required; parametised-number). x component (horizontal displacement)
dy (required; parametised-number). y component (vertical displacement)
colour (colour; default: green). Arrow colour
width (number; default: 2). Stroke width
dashed (boolean; default: false). Dashed stroke
opacity (number; default: 1). Opacity (0–1)

vector(x: 0; y: 0; dx: 3; dy: 2; colour: green)
vector(x: 0; y: 0; dx: -1; dy: 3; colour: red; dashed: true)

vector(x: 0; y: 0; dx: 3; dy: 2; colour: green)
vector(x: 0; y: 0; dx: -1; dy: 3; colour: red; dashed: true)

Chalk

Read-only

segment

segment

A line segment between two explicit endpoints (x1, y1) and (x2, y2).

x1 (required; parametised-number). First point x
y1 (required; parametised-number). First point y
x2 (required; parametised-number). Second point x
y2 (required; parametised-number). Second point y
colour (colour; default: grey). Segment colour
width (number; default: 2). Stroke width
dashed (boolean; default: false). Dashed stroke
opacity (number; default: 1). Opacity (0–1)

segment(x1: -2; y1: 1; x2: 2; y2: -1; colour: grey; dashed: true)

segment(x1: -2; y1: 1; x2: 2; y2: -1; colour: grey; dashed: true)

Chalk

Read-only

point

point

A single point marker at (x, y). Use to highlight specific coordinates, solutions, or data points.

x (required; parametised-number). x coordinate
y (required; parametised-number). y coordinate
size (parametised-number; default: 6). Point radius in pixels
colour (colour; default: orange). Point colour
opacity (number; default: 1). Opacity (0–1)

point(x: 2; y: 4; colour: orange; size: 8)
point(x: -1; y: 1)

point(x: 2; y: 4; colour: orange; size: 8)
point(x: -1; y: 1)

Chalk

Read-only

text

text

A text label positioned at (x, y) on the diagram canvas. Use for annotations, axis labels, or coordinate labels.

x (number; default: 0). x coordinate
y (number; default: 0). y coordinate
size (number; default: 20). Font size in pixels
colour (colour; default: neutral). Text colour
anchor (start / middle / end; default: middle). Horizontal text alignment

text{ Origin }(x: 0.3; y: -0.8; size: 14; colour: neutral)
text{ Peak }(x: 1.5; y: 4.3; size: 14; anchor: start)

text{ Origin }(x: 0.3; y: -0.8; size: 14; colour: neutral)
text{ Peak }(x: 1.5; y: 4.3; size: 14; anchor: start)

Chalk

Read-only

scatter

scatter

A scatter plot of discrete data points, each rendered as a marker shape.

data (required; parametised-coordinate-list). Coordinate list
shape (shape-type; default: circle). Marker shape (circle, square, triangle, diamond, star, hexagon)
size (parametised-number; default: 6). Marker size in pixels
colour (colour; default: red). Marker colour
opacity (number; default: 1). Opacity (0–1)

scatter(data: (1,2),(2,3.5),(3,2.8),(4,4.1),(5,5); colour: red)

scatter(data: (1,2),(2,3.5),(3,2.8),(4,4.1),(5,5); colour: red)

Chalk

Read-only

histogram

histogram

A bar chart rendered on the diagram canvas using pre-binned data. bins defines the edges between bars — it must have exactly one more value than values.

bins (required; number-list). Comma-separated bin edges (N+1 values for N bars)
values (required; number-list). Comma-separated bar heights, one per bin
colours (colour-list; default: —). Per-bar colours; first colour is the fallback
orientation (vertical / horizontal; default: vertical). Bar direction
show-labels (boolean; default: false). Show numeric values above each bar

diagram{
    histogram(
        bins: 0, 10, 20, 30, 40
        values: 5, 12, 8, 3
        colours: teal, teal, teal, teal
        show-labels: true
    )
}(
    x domain: [0, 40]
    y domain: [0, 15]
)

diagram{
    histogram(
        bins: 0, 10, 20, 30, 40
        values: 5, 12, 8, 3
        colours: teal, teal, teal, teal
        show-labels: true
    )
}(
    x domain: [0, 40]
    y domain: [0, 15]
)

Chalk

Read-only

On this page

diagram parameter curve line polygon Shapes vector segment point text scatter histogram

Diagrams

The diagram canvas element and all drawing primitives — curves, shapes, data plots, and labels

diagram

diagramalias: graph

A coordinate canvas for mathematical drawings. Place drawing primitives inside the body {}. Diagrams go in the detail panel [] of a scene, displayed alongside the narrative body.

x domain (interval; default: [-10, 10]). Horizontal range of the canvas
y domain (interval; default: [-10, 10]). Vertical range of the canvas
x-axis-label (string; default: —). Label for the x-axis
y-axis-label (string; default: —). Label for the y-axis
title (string; default: —). Title displayed above the diagram
show axes (boolean; default: true). Show x and y axes
show grid (boolean; default: true). Show the background grid
show ticks (boolean; default: true). Show axis tick marks
show background (boolean; default: true). Show the diagram background
x grid spacing (grid-step; default: auto). Grid line spacing on x-axis
y grid spacing (grid-step; default: auto). Grid line spacing on y-axis

scene{
    The parabola $y = x^2$ is symmetric about the y-axis.
}[
    diagram{
        curve(expression: x^2; colour: blue)
        point(x: 0; y: 0; colour: orange)
        text{ vertex }(x: 0.4; y: 0.3; size: 14)
    }(
        x domain: [-4, 4]
        y domain: [-1, 10]
        x-axis-label: x
        y-axis-label: y
    )
]

scene{
    The parabola $y = x^2$ is symmetric about the y-axis.
}[
    diagram{
        curve(expression: x^2; colour: blue)
        point(x: 0; y: 0; colour: orange)
        text{ vertex }(x: 0.4; y: 0.3; size: 14)
    }(
        x domain: [-4, 4]
        y domain: [-1, 10]
        x-axis-label: x
        y-axis-label: y
    )
]

Chalk

Read-only

parameter

parameteralias: param

var (required; single-char). Variable letter (a–z)
range (parametised-interval; default: [-10, 10]). Slider range [min, max]
step (number; default: 1). Slider step size
default (number; default: 0). Initial slider value

scene{
    Explore $y = a \sin(bx)$.
}[
    parameter{
        Amplitude $a$
    }(var: a; range: [0.5, 4]; step: 0.5; default: 1)

    parameter{
        Frequency $b$
    }(var: b; range: [0.5, 3]; step: 0.5; default: 1)

    diagram{
        curve(expression: a * sin(b * x); colour: teal)
    }(x domain: [-7, 7]; y domain: [-5, 5])
]

scene{
    Explore $y = a \sin(bx)$.
}[
    parameter{
        Amplitude $a$
    }(var: a; range: [0.5, 4]; step: 0.5; default: 1)

    parameter{
        Frequency $b$
    }(var: b; range: [0.5, 3]; step: 0.5; default: 1)

    diagram{
        curve(expression: a * sin(b * x); colour: teal)
    }(x domain: [-7, 7]; y domain: [-5, 5])
]

Chalk

Read-only

curve

curve

Plots a mathematical function y = f(x) as a smooth curve. Expressions use standard math notation and can reference parameter variables.

expression (required; parametised-expression). Math expression for y as a function of x
colour (colour; default: blue). Curve colour
width (number; default: 2). Stroke width in pixels
dashed (boolean; default: false). Dashed stroke
domain (parametised-interval; default: —). Restrict the x range of the curve
range (parametised-interval; default: —). Clip the y range of the curve
arrowheads (boolean; default: true). Show arrowheads at curve endpoints

curve(expression: sin(x); colour: teal)
curve(expression: cos(x); colour: orange; dashed: true)
curve(expression: x^2; domain: [-3, 3]; colour: blue)

curve(expression: sin(x); colour: teal)
curve(expression: cos(x); colour: orange; dashed: true)
curve(expression: x^2; domain: [-3, 3]; colour: blue)

Chalk

Read-only

line

line

A polyline connecting a sequence of coordinate points. Use for data series, piecewise functions, or step functions.

data (required; parametised-coordinate-list). Coordinates, e.g. (0,0),(1,2),(2,3)
colour (colour; default: pink). Line colour
width (number; default: 2). Stroke width
interpolate (linear / step; default: linear). linear connects points directly; step draws horizontal then vertical

line(data: (0,0),(1,2),(2,1),(3,3); colour: green; width: 2)

line(data: (0,0),(1,2),(2,1),(3,3); colour: green; width: 2)

Chalk

Read-only

polygon

polygon

A filled or unfilled polygon connecting a sequence of coordinate points.

data (required; parametised-coordinate-list). Vertex coordinates
fill (boolean; default: true). Fill the interior
colour (colour; default: teal). Fill and stroke colour
opacity (number; default: 1). Opacity (0–1)

polygon(data: (0,0),(2,0),(1,2); colour: teal; opacity: 0.4)

polygon(data: (0,0),(2,0),(1,2); colour: teal; opacity: 0.4)

Chalk

Read-only

Shapes

circle, square, rectangle, triangle, diamond, hexagon, star

Fixed geometric shapes positioned at (x, y) with a given size. All share the same attribute set. Available shapes: circle, square, rectangle, triangle, diamond, hexagon, star.

x (parametised-number; default: 0). Centre x coordinate
y (parametised-number; default: 0). Centre y coordinate
size (parametised-number; default: 1). Radius or side length
colour (colour; default: purple). Shape colour
fill (boolean; default: true). Fill the interior
opacity (number; default: 1). Opacity (0–1)

circle(x: 0; y: 0; size: 2; fill: false; colour: purple)
square(x: 3; y: 1; size: 1.5; colour: teal; opacity: 0.5)
triangle(x: -2; y: 0; size: 1; colour: orange)
diamond(x: 1; y: 3; size: 1)

circle(x: 0; y: 0; size: 2; fill: false; colour: purple)
square(x: 3; y: 1; size: 1.5; colour: teal; opacity: 0.5)
triangle(x: -2; y: 0; size: 1; colour: orange)
diamond(x: 1; y: 3; size: 1)

Chalk

Read-only

vector

vector

A directed arrow from origin (x, y) in direction (dx, dy). Use for showing forces, velocity, gradients, or any directed quantity.

x (parametised-number; default: 0). Origin x
y (parametised-number; default: 0). Origin y
dx (required; parametised-number). x component (horizontal displacement)
dy (required; parametised-number). y component (vertical displacement)
colour (colour; default: green). Arrow colour
width (number; default: 2). Stroke width
dashed (boolean; default: false). Dashed stroke
opacity (number; default: 1). Opacity (0–1)

vector(x: 0; y: 0; dx: 3; dy: 2; colour: green)
vector(x: 0; y: 0; dx: -1; dy: 3; colour: red; dashed: true)

vector(x: 0; y: 0; dx: 3; dy: 2; colour: green)
vector(x: 0; y: 0; dx: -1; dy: 3; colour: red; dashed: true)

Chalk

Read-only

segment

segment

A line segment between two explicit endpoints (x1, y1) and (x2, y2).

x1 (required; parametised-number). First point x
y1 (required; parametised-number). First point y
x2 (required; parametised-number). Second point x
y2 (required; parametised-number). Second point y
colour (colour; default: grey). Segment colour
width (number; default: 2). Stroke width
dashed (boolean; default: false). Dashed stroke
opacity (number; default: 1). Opacity (0–1)

segment(x1: -2; y1: 1; x2: 2; y2: -1; colour: grey; dashed: true)

segment(x1: -2; y1: 1; x2: 2; y2: -1; colour: grey; dashed: true)

Chalk

Read-only

point

point

A single point marker at (x, y). Use to highlight specific coordinates, solutions, or data points.

x (required; parametised-number). x coordinate
y (required; parametised-number). y coordinate
size (parametised-number; default: 6). Point radius in pixels
colour (colour; default: orange). Point colour
opacity (number; default: 1). Opacity (0–1)

point(x: 2; y: 4; colour: orange; size: 8)
point(x: -1; y: 1)

point(x: 2; y: 4; colour: orange; size: 8)
point(x: -1; y: 1)

Chalk

Read-only

text

text

A text label positioned at (x, y) on the diagram canvas. Use for annotations, axis labels, or coordinate labels.

x (number; default: 0). x coordinate
y (number; default: 0). y coordinate
size (number; default: 20). Font size in pixels
colour (colour; default: neutral). Text colour
anchor (start / middle / end; default: middle). Horizontal text alignment

text{ Origin }(x: 0.3; y: -0.8; size: 14; colour: neutral)
text{ Peak }(x: 1.5; y: 4.3; size: 14; anchor: start)

text{ Origin }(x: 0.3; y: -0.8; size: 14; colour: neutral)
text{ Peak }(x: 1.5; y: 4.3; size: 14; anchor: start)

Chalk

Read-only

scatter

scatter

A scatter plot of discrete data points, each rendered as a marker shape.

data (required; parametised-coordinate-list). Coordinate list
shape (shape-type; default: circle). Marker shape (circle, square, triangle, diamond, star, hexagon)
size (parametised-number; default: 6). Marker size in pixels
colour (colour; default: red). Marker colour
opacity (number; default: 1). Opacity (0–1)

scatter(data: (1,2),(2,3.5),(3,2.8),(4,4.1),(5,5); colour: red)

scatter(data: (1,2),(2,3.5),(3,2.8),(4,4.1),(5,5); colour: red)

Chalk

Read-only

histogram

histogram

A bar chart rendered on the diagram canvas using pre-binned data. bins defines the edges between bars — it must have exactly one more value than values.

bins (required; number-list). Comma-separated bin edges (N+1 values for N bars)
values (required; number-list). Comma-separated bar heights, one per bin
colours (colour-list; default: —). Per-bar colours; first colour is the fallback
orientation (vertical / horizontal; default: vertical). Bar direction
show-labels (boolean; default: false). Show numeric values above each bar

diagram{
    histogram(
        bins: 0, 10, 20, 30, 40
        values: 5, 12, 8, 3
        colours: teal, teal, teal, teal
        show-labels: true
    )
}(
    x domain: [0, 40]
    y domain: [0, 15]
)

diagram{
    histogram(
        bins: 0, 10, 20, 30, 40
        values: 5, 12, 8, 3
        colours: teal, teal, teal, teal
        show-labels: true
    )
}(
    x domain: [0, 40]
    y domain: [0, 15]
)

Chalk

Read-only

On this page

diagram parameter curve line polygon Shapes vector segment point text scatter histogram