Skip to content

Plot

A 2-D function plot representation (Plot), rendered by <notatio-plot>. The element samples a univariate expression across a domain — substituting the free variable and taking the numeric value — and draws the curve as pure SVG. value is notatio (the restricted-Epsil subset); LaTeX goes in a $…$ island. Poles (non-finite samples) break the line rather than drawing a spurious jump. Axes default on (axes="false" to hide, à la Wolfram's Axes); either axis takes a scaling function via x-scale / y-scale (linear, log, log10, log2, sqrt — Wolfram's ScalingFunctions). A list of expressions overlays several series; parametric traces (x(t), y(t)); mode="points" draws dots; a list of numeric pairs plots as data. Hover any plot to read off the nearest sample. Function curves are sampled adaptively (à la Plot's refinement) — dense where the curve bends, sparse where it's straight (adaptive="false" for a plain uniform grid). Chrome options mirror Plot's: grid (GridLines), fill (Filling), legend (PlotLegends), plot-range="lo,hi" (PlotRange), x-label / y-label (AxesLabel), label (PlotLabel), and color-by="x|y" to recolour the curve along a ramp (ColorFunction). params adds interactive Manipulate sliders — see Manipulate below. Surfaces live on the separate Plot 3D page.

Curves

Sine over one period

source
<notatio-plot value="Sin(x)" domain="-6.283,6.283" />

A cubic

The free variable is inferred when var is omitted.

source
<notatio-plot value="x^3 - 3x" domain="-3,3" />

A pole (1/x)

The sample straddling 0 is non-finite, so the curve splits into two segments instead of streaking across the asymptote.

source
<notatio-plot value="1 / x" domain="-3,3" />

A LaTeX island + custom domain

A $…$ island is parsed as LaTeX, implicit multiplication and all; samples controls resolution.

source
<notatio-plot value="$x\sin(x)$" domain="-12.566,12.566" samples="240" />

Log y-scale (exponential ⇒ straight line)

A log y-axis renders as a straight line; the range labels still read the raw values. Non-positive samples fall outside the log domain and gap out.

source
<notatio-plot value="Exp(x)" domain="0,5" y-scale="log" />

Several series

A set (or comma list) of expressions overlays one curve per entry, each in its own colour. Hover to read every series at the pointer's x.

source
<notatio-plot value="{Sin(x), Cos(x), Sin(x) * Cos(x)}" domain="-6.283,6.283" />

Parametric curve (a Lissajous figure)

parametric reads the pair as (x(t), y(t)) and traces it over domain in var.

source
<notatio-plot value="(Sin(3t), Sin(4t))" var="t" domain="0,6.283" parametric samples="400" />

Points mode

source
<notatio-plot value="Sin(x)" domain="0,6.283" mode="points" samples="40" />

Data points (ListPlot)

A list of numeric pairs is data, drawn as dots; add mode="line" to join them.

source
<notatio-plot value="{(1,1),(2,4),(3,9),(4,16),(5,25)}" />

Chrome & colour

Grid, fill, legend, labels

The Plot-style chrome, all opt-in: light gridlines, a filled area to the zero axis, a legend keyed to the series, an axis label, a forced plot-range, and a label (PlotLabel) title.

source
<notatio-plot value="{Sin(x), Cos(x)}" domain="-6.283,6.283" grid fill legend x-label="x" plot-range="-1.2,1.2" label="sin & cos" />

Colour by value (ColorFunction)

color-by="y" ramps the stroke from blue (low) to accent (high) by height; "x" ramps left-to-right.

source
<notatio-plot value="Sin(x)" domain="-6.283,6.283" color-by="y" />

Axes off (bare curve)

source
<notatio-plot value="Sin(x)" domain="-6.283,6.283" axes="false" />

Manipulate

params binds Manipulate's own control tuples into the expression and renders a slider (or setter) per parameter, re-sampling live as it moves. Each control fills the matching named wildcard in value — control a fills _a, compute-engine's own slot notation. The tuple forms are Wolfram's: {a, min, max}, {a, min, max, step}, { {a, init}, min, max }, and a discrete {k, {1, 2, 3}}; separate several with ;. Every slider carries a play button (▶) that animates it on a loop (⏸ to stop).

Two parameters

a scales the frequency, b shifts the phase — each free parameter becomes its own slider and fills its wildcard.

source
<notatio-plot value="Sin(_a * x + _b)" domain="-6.283,6.283" params="{a, 1, 5}; {b, 0, 6.283}" />

Amplitude · frequency · phase

Three sliders with explicit initial values — the classic sinusoid knobs.

source
<notatio-plot value="_A * Sin(_w * x + _p)" domain="-6.283,6.283" params="{{A, 1}, 0, 2}; {{w, 2}, 0.5, 6}; {p, 0, 6.283}" plot-range="-2,2" />

Animate the phase (press ▶)

Press ▶ on t to watch the wave travel; ⏸ to stop.

source
<notatio-plot value="Sin(x - _t)" domain="-6.283,6.283" params="{t, 0, 6.283}" />

A movable, resizable bump

c slides a Gaussian bump left/right, s widens it.

source
<notatio-plot value="Exp(-(x - _c)^2 / _s)" domain="-6.283,6.283" params="{{c, 0}, -5, 5}; {{s, 1}, 0.2, 4}" plot-range="0,1.1" fill />

A stepped, integer harmonic

A step of 1 makes n an integer knob — sweep the harmonics with ▶.

source
<notatio-plot value="Sin(_n * x)" domain="-6.283,6.283" params="{{n, 1}, 1, 8, 1}" grid />

A discrete choice

A brace list becomes a setter over discrete values.

source
<notatio-plot value="Sin(_k * x)" domain="-6.283,6.283" params="{k, {1, 2, 3, 5}}" grid />

Roadmap

  • More Manipulate control kinds (checkbox, 2-D locator), and a shared play-all.
  • Image export — a REPL requests a plot and gets back a link to a rendered file.
  • Surfaces have their own page: Plot 3D.