integral

The area under a curve between two values, shaded. of: takes #bell for a curve in the same environment or an expression to shade directly, and the region is sampled from the curve itself, so it follows an animated expression and a parameter driving either limit. The region closes along the axis: what is shaded is the area between the curve and y = 0, and where the curve dips below the axis the shading follows it down.

integralNode
Only withxyplane
A bell curve with the area beneath it shaded between x = −1 and x = 1.A bell curve with the area beneath it shaded between x = −1 and x = 1.
Writing with it:
Reading computed values in prose

An integral shades the area under a referenced curve between two bounds — integral(of: #bell; from: -1; to: 1) — and exposes the computed area as derived value. Its bounds may be expressions, so a parameter can sweep the region while the reader watches the value change.

base says what the area closes down to: the axis, unless it names another curve (base: #demand) or an expression of its own — base: 6 shades down to that height. The area between two curves is not a mark of its own because it is not an idea of its own, and the reported value follows the floor. A region a parametric curve encloses is that curve's fill instead.

#Attributes

ofRequiredImplicit
The curve to shade under: #id for a curve in this environment, or an expression shaded directly.
curve-path
Also written: curve, underCan be written as shorthand: integral:value
fromRequiredAnimatable
Where the region starts. May be an expression in the environment's parameters.
parametised-number
Also written: a, start
toRequiredAnimatable
Where it ends. May be an expression in the environment's parameters.
parametised-number
Also written: b, end
base
What the region closes DOWN to: the axis unless this names something else — another curve in the environment (base: #demand) or an expression of its own, and a number is one (base: 6 shades down to that height). The area between two curves is not a special mark, because it is not a special idea: an integral is the region between a function and a floor, and y = 0 is only the floor nothing else was named. The reported value follows, so with a base it is the area BETWEEN.
curve-path
Also written: down-to, floor
colourAnimatable
The wash and its edges.
bluelight-bluedark-blueredlight-reddark-redorangelight-orangedark-orangeyellowlight-yellowdark-yellowteallight-tealdark-tealgreenlight-greendark-greenpinklight-pinkdark-pinkpurplelight-purpledark-purplegreylight-greydark-greyneutralhex(…)rgb(…)
Also written: color
Defaultblue
opacityAnimatable
How heavy the wash is.
number
Default0.35
edges
Draw a line down to the axis at each limit.
boolean
Defaulttrue
label
Text drawn in the middle of the region — rich text, so $maths$ renders.
rich-text
hiddenAnimatable
Declared and framed, but not drawn.
boolean
Defaultfalse
lock
A reader may not edit it on an editable graph.
boolean
Also written: locked
Defaultfalse
layerAnimatable
Paint order among the marks: a higher layer is drawn later, on top; equal or omitted, the marks stack in document order (later on top). Written z: before the argand plane took that letter for its coordinate.
parametised-number

#Derived attributes

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

valueDerived
The computed area of the shaded interval — the number the shading is. Cite it with {{#id.value}} and a probability label can never drift from the drawing.

#Allowed in

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

#Examples

A bell curve with the area beneath it from −1 to 1 shaded and labelled 0.68.A bell curve with the area beneath it from −1 to 1 shaded and labelled 0.68.
canvas.graph{
    curve#bell(expression: exp(-x^2 / 2))
    integral(of: #bell; from: -1; to: 1; label: $0.68$)
}(
    x-domain: [-3, 3]
)
The teal area under y = x² from 0 to 2, with no curve drawn over it.The teal area under y = x² from 0 to 2, with no curve drawn over it.
canvas.graph{
    integral(of: x^2; from: 0; to: 2; colour: teal)
}(
    x-domain: [-1, 3]
    y-domain: [0, 5]
)
A rising velocity curve with the faint area beneath it from 0 to 5 shaded, its edges left undrawn.A rising velocity curve with the faint area beneath it from 0 to 5 shaded, its edges left undrawn.
canvas.graph{
    curve#velocity(expression: 2 + x - x^2 / 10)
    integral(of: #velocity; a: 0; b: 5; edges: false; opacity: 0.2)
}(
    x-domain: [0, 6]
    y-domain: [0, 6]
)

Last updated