<notatio-plot-3d>
<notatio-plot-3d value="Sin(x) * Cos(y)" x-domain="-3,3" y-domain="-3,3"> -- a surface plot of a bivariate expression, projected to SVG. value is notatio; LaTeX is accepted inside a $…$ island. Samples an n×n grid by substituting the two free variables (defaulting to the first two unknowns) and drawing the height field. compute-engine loads on demand. The view is interactive: drag rotates (azimuth / elevation), and ctrl/⌘ + wheel (or a pinch) zooms. Sampling happens once per expression; a view change only re-projects the cached grid.
params adds Manipulate-style sliders whose values fill the matching named wildcards (_k) in value and re-sample live, e.g. params="{k, 1, 4}" over value="Sin(_k * x) * Cos(_k * y)".
Attributes
| Attribute | Type | Default | Notes |
|---|---|---|---|
value | string | "" | The surface, in notatio. A list ({f, g}) overlays several on one scale. |
xvar | string | "" | The variable on the x axis; defaults to the expression's first unknown. |
yvar | string | "" | The variable on the y axis; defaults to the next unknown after xvar. |
x-domain property xDomain | string | "-3,3" | The x sampling range, as lo,hi. |
y-domain property yDomain | string | "-3,3" | The y sampling range, as lo,hi. |
n | number | 26 | Grid resolution per side, clamped to 2..60. gpu raises this. |
axes | string | "true" | "false" hides the axes frame and its range labels. |
x-scale property xScale | string | "linear" | Scaling function for x: linear, log, log10, log2 or sqrt. |
y-scale property yScale | string | "linear" | Scaling function for y. |
z-scale property zScale | string | "linear" | Scaling function for the height. |
azimuth | number | 45 | Rotation about the vertical, in degrees. Dragging changes this. |
elevation | number | 15 | Viewing angle above the plane, in degrees. Dragging changes this. |
zoom | number | 1 | View scale; ctrl/cmd + wheel or a pinch changes this. Double-click resets. |
label | string | "" | Caption drawn above the surface. |
color-legend property colorLegend | string | "false" | Anything but "false" draws the height-colour ramp beside the surface. |
spin | string | "false" | Anything but "false" auto-rotates the view; the ⟳ button toggles it. |
gpu | string | "false" | Evaluate the grid in a WebGPU shader. A number also sets n; falls back to the CPU. |
params | string | "" | Manipulate-style controls, e.g. {k, 1, 4}, filling the _k wildcards in value. |
loop | Loop | "" | == "reflect" || this.loop === "none" ? this.loop : "cycle"),
setLoop: (loop) => (this.loop = loop),
interval: 120,
motion: "grid",
update: () => this.requestUpdate(),
},
openPlaybackMenu,
LONG_PRESS_MS,
) | What a playing slider does at the ends: cycle (default), reflect or none.reflects |