Sine over one period
source
<notatio-plot value="Sin(x)" domain="-6.283,6.283" />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.
<notatio-plot value="Sin(x)" domain="-6.283,6.283" />The free variable is inferred when var is omitted.
<notatio-plot value="x^3 - 3x" domain="-3,3" /> The sample straddling 0 is non-finite, so the curve splits into two segments instead of streaking across the asymptote.
<notatio-plot value="1 / x" domain="-3,3" />A $…$ island is parsed as LaTeX, implicit multiplication and all; samples controls resolution.
<notatio-plot value="$x\sin(x)$" domain="-12.566,12.566" samples="240" /> A log y-axis renders eˣ as a straight line; the range labels still read the raw values. Non-positive samples fall outside the log domain and gap out.
<notatio-plot value="Exp(x)" domain="0,5" y-scale="log" /> 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.
<notatio-plot value="{Sin(x), Cos(x), Sin(x) * Cos(x)}" domain="-6.283,6.283" />parametric reads the pair as (x(t), y(t)) and traces it over domain in var.
<notatio-plot value="(Sin(3t), Sin(4t))" var="t" domain="0,6.283" parametric samples="400" /><notatio-plot value="Sin(x)" domain="0,6.283" mode="points" samples="40" /> A list of numeric pairs is data, drawn as dots; add mode="line" to join them.
<notatio-plot value="{(1,1),(2,4),(3,9),(4,16),(5,25)}" /> 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.
<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" />color-by="y" ramps the stroke from blue (low) to accent (high) by height; "x" ramps left-to-right.
<notatio-plot value="Sin(x)" domain="-6.283,6.283" color-by="y" /><notatio-plot value="Sin(x)" domain="-6.283,6.283" axes="false" />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).
a scales the frequency, b shifts the phase — each free parameter becomes its own slider and fills its wildcard.
<notatio-plot value="Sin(_a * x + _b)" domain="-6.283,6.283" params="{a, 1, 5}; {b, 0, 6.283}" />Three sliders with explicit initial values — the classic sinusoid knobs.
<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" /> Press ▶ on t to watch the wave travel; ⏸ to stop.
<notatio-plot value="Sin(x - _t)" domain="-6.283,6.283" params="{t, 0, 6.283}" />c slides a Gaussian bump left/right, s widens it.
<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 step of 1 makes n an integer knob — sweep the harmonics with ▶.
<notatio-plot value="Sin(_n * x)" domain="-6.283,6.283" params="{{n, 1}, 1, 8, 1}" grid />A brace list becomes a setter over discrete values.
<notatio-plot value="Sin(_k * x)" domain="-6.283,6.283" params="{k, {1, 2, 3, 5}}" grid />Manipulate control kinds (checkbox, 2-D locator), and a shared play-all.