Skip to content

<notatio-list-plot-3d>

Parse a JSON attribute defensively -- an empty/invalid value reads as undefined. */ function parseJson(value: string): unknown { const text = value.trim(); if (!text) return undefined; try { return JSON.parse(text); } catch { return undefined; } }

const isNumber = (v: unknown): v is number => typeof v === "number" && Number.isFinite(v);

/** [[x, y, z], ...] triples. */ function toPoints(data: unknown): Point3[] | undefined { if (!Array.isArray(data) || data.length === 0) return undefined; if (!data.every((p) => Array.isArray(p) && p.length >= 3 && p.slice(0, 3).every(isNumber))) return undefined; return (data as number[][]).map(([x, y, z]) => ({ x, y, z })); }

/** A rectangular 2-D matrix of heights. */ function toMatrix(data: unknown): number[][] | undefined { if (!Array.isArray(data) || data.length === 0 || !data.every((r) => Array.isArray(r))) return undefined; // A null (or any non-number) reads as a hole, not as a dropped cell, so // rows keep their length and the grid stays rectangular. const rows = (data as unknown[][]).map((r) => r.map((v) => (isNumber(v) ? v : Number.NaN))); return rows.every((r) => r.length === rows[0].length && r.length > 0) ? rows : undefined; }

/** <notatio-list-plot-3d data="[[0,1],[2,3]]"> -- 3-D data, orthographically projected. type="surface" (the default) reads data as a height grid and draws it as a quad mesh (Wolfram's ListPlot3D / ListSurfacePlot3D); type="points" reads data as [x, y, z] triples and draws a scatter (ListPointPlot3D). Triples given to the surface form are binned onto an n×n grid first, so scattered samples still surface.

The view is fixed by azimuth / elevation (no interaction), keeping the whole pipeline a pure function of the attributes -- it renders identically under SSR and in the browser.

Stories in the playground·packages/notatio-lit/src/notatio-list-plot-3d.ts· in Vue: <ListPlot3D>

Attributes

AttributeTypeDefaultNotes
datastring""
type"surface" | "points""surface"
azimuthnumber30
elevationnumber25
zoomnumber1
nnumber12
sizenumber0
depth-cue
property depthCue
number-1
wireframestring"false"
axesstring"true"
zrangestring""
labelstring""