ListPlot3D

<graphics-3d-box value="Plot3D(Sin(x) * Cos(y), (x, -3, 3), (y, -3, 3))"> -- a figure in space, the Graphics3DBox its expression lowers to. The element holds the expression (options and all, as a 2-D plot does), the page's kernel samples it, and the samples lower to boxes that graphics3dSvg draws. Drag rotates (Azimuth, Elevation), ⌘/Ctrl + wheel or a pinch zooms (Zoom), double-click returns to the first view. Its wildcards (_k) are a surrounding Manipulate's controls, and moving one samples the compiled code again.

- Plot3D(f, (x, a, b), (y, c, d)): a surface, f a list for several on one scale. Hover reads out a sample. Gpu -> True (or a grid size) evaluates the grid in a WebGPU shader, falling back to the CPU; Spin -> True turns the view on its own; N is the grid per side (2 to 60). PlotLegends -> True draws a height key; PlotLabel titles it. - ListPlot3D(grid) is a mesh of a height grid (or of [x, y, z] points, binned onto one), Type -> "points" a scatter, Wireframe -> True outlines only. - BarChart3D(matrix) is bars, one row of a flat list; Gap, ZRange, RowLabels, ColLabels. - Graphics3D(Line(points), Closed -> True) is a curve in space, points an expression the page evaluates (KnotCurve(TorusKnot(2, 3))). The nearer strand passes in front of the farther, color runs along the parameter, Torus -> (2, 1) draws the tube it lies on, Clock -> True sends a marker along it with the page's clock (Phase -> 0.3 pins it), Caption sets a caption.

Color is a gradient (ColorFunction -> "Magma", default viridis; sinebow for a curve); several surfaces are told apart by color instead.

Demos·packages/components/src/graphics-3d-box.ts· draws Plot3D, ListPlot3D, BarChart3D, Graphics3D

Stories

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

ListPlot3D([[0, 1, 2, 3], [1, 3, 4, 3], [2, 4, 6, 4], [1, 2, 3, 2]])

notebook cells, the CLI

#A ridge, from a different angle

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

source

ListPlot3D([
             [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"))

notebook cells, the CLI

#Wireframe

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

source

ListPlot3D(
            [[0, 1, 2, 3], [1, 3, 4, 3], [2, 4, 6, 4], [1, 2, 3, 2]],
            (Wireframe, True),
          )

notebook cells, the CLI

#A hole in the surface

A missing sample (an empty string, since the schema has no null) is a hole: the four quads that touch it are skipped, rather than drawing a spike through zero.

source

ListPlot3D([
             [0, 0, 0, 0, 0],
             [0, 1, 2, 1, 0],
             [0, 2, "", 2, 0],
             [0, 1, 2, 1, 0],
             [0, 0, 0, 0, 0],
           ])

notebook cells, the CLI

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

ListPlot3D([
             [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],
           ], (Type, "points"))

notebook cells, the CLI

#Without depth cueing

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

source

ListPlot3D([
             [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],
           ], (Type, "points"), (DepthCue, 0), (Size, 5))

notebook cells, the CLI

#Scattered triples, surfaced

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

source

ListPlot3D([
             [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))

notebook cells, the CLI

Color

#Heights on the cool gradient

source

ListPlot3D([[0, 1, 2], [1, 3, 1], [2, 1, 0]], (ColorFunction, "Cool"))

notebook cells, the CLI

Props

Prop	Type	Default	Notes
value	string	""	The expression, in Epsil.
azimuth	number	45	The view, which dragging changes; the expression's Azimuth, Elevation and Zoom start it.
elevation	number	15
zoom	number	1

As a web component

Plain custom elements, no framework required: import @enumeratio/frontend for the side effect and write <graphics-3d-box> in any HTML. Attributes are kebab-case and always strings; the props table above names each one's attribute where it differs from its prop.

Settable only as a JS property, not an attribute -- points, box, bindings: bind with :points.prop="…" directly on the tag.