Skip to content

List Plot 3D

3-D data, orthographically projected by <notatio-list-plot-3d>. Two shapes share the element:

  • type="surface" (the default) — a height grid [[…], […]] drawn as a projected quad mesh (Wolfram's ListPlot3D / ListSurfacePlot3D), shaded by height. Scattered [x, y, z] triples are binned onto an n×n grid first.
  • type="points"[x, y, z] triples as a 3-D scatter (ListPointPlot3D).

The camera is a plain orthographic projection: the data is normalised into the unit cube, rotated by azimuth about the vertical axis, tilted by elevation, and scaled to fit the frame. There is no perspective — depth serves only to order the drawing back-to-front (the painter's algorithm) and, for points, to shrink and fade what's far away. The view is fixed by its attributes, so the figure is a pure function of the markup and renders identically under SSR.

Function surfaces — sampled from an expression, with an interactive drag-to-rotate view — live on Plot 3D.

Surfaces

A height grid

data[j][i] is the height at the i-th x and j-th y sample; each cell becomes one projected quad, shaded by its mean height.

source
<notatio-list-plot-3d data="[[0,1,2,3],[1,3,4,3],[2,4,6,4],[1,2,3,2]]" />

A ridge, from a different angle

azimuth rotates about the vertical axis; elevation tilts the view above the floor.

source
<notatio-list-plot-3d data="[[0,0,0,0,0],[0,1,2,1,0],[0,2,5,2,0],[0,1,2,1,0],[0,0,0,0,0]]" azimuth="55" elevation="35" label="a ridge" />

Wireframe

wireframe draws the quad outlines unfilled — useful when the mesh matters more than the shading.

source
<notatio-list-plot-3d data="[[0,1,2,3],[1,3,4,3],[2,4,6,4],[1,2,3,2]]" wireframe />

A hole in the surface

A missing sample (null) is a hole: the four quads that touch it are skipped, rather than drawing a spike through zero.

source
<notatio-list-plot-3d data="[[0,0,0,0,0],[0,1,2,1,0],[0,2,null,2,0],[0,1,2,1,0],[0,0,0,0,0]]" />

Point clouds

A 3-D scatter

Markers are drawn back-to-front, shrinking and fading with distance — the only depth cue an orthographic view has.

source
<notatio-list-plot-3d type="points" data="[[0,0,0],[1,0,1],[0,1,1],[1,1,0],[0.5,0.5,2],[0.2,0.8,0.4],[0.8,0.2,1.6]]" />

Without depth cueing

depth-cue="0" draws every marker at the same size and opacity; size sets the near-marker radius.

source
<notatio-list-plot-3d type="points" data="[[0,0,0],[1,0,1],[0,1,1],[1,1,0],[0.5,0.5,2],[0.2,0.8,0.4],[0.8,0.2,1.6]]" depth-cue="0" size="5" />

Scattered triples, surfaced

Given triples, the surface form bins them onto an n×n grid — each cell the mean z of the points that land in it, a cell with no points a hole — and meshes that.

source
<notatio-list-plot-3d data="[[0,0,1],[1,0,2],[2,0,1],[0,1,2],[1,1,4],[2,1,2],[0,2,1],[1,2,2],[2,2,1],[0.4,0.4,1.5],[1.6,1.4,3]]" n="3" />

Roadmap

  • Drag-to-rotate and wheel-zoom, as <notatio-plot-3d> has.
  • Bilinear subdivision, so a coarse grid reads as a smooth surface.
  • A hover readout of the nearest sample's (x, y, z).