Plot3D

<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 saddle

source

Plot3D(x ^ 2 - y ^ 2, (x, -2, 2), (y, -2, 2))

notebook cells, the CLI

#A ripple

source

Plot3D(Sin(x) * Cos(y), (x, -3.14, 3.14), (y, -3.14, 3.14))

notebook cells, the CLI

#Auto-rotating (spin on)

Spin -> True starts the view turning on load; the ⟳ spin button toggles it, and drag to take over.

source

Plot3D(Sin(x) * Cos(y), (x, -3.14, 3.14), (y, -3.14, 3.14), (Spin, True))

notebook cells, the CLI

#A radial bump (title + height key)

PlotLabel is a title; ColorLegend draws a height key matching the surface's shading. Hover to read a sample.

source

Plot3D(
        Exp(-((x ^ 2 + y ^ 2) / 4)),
        (x, -4, 4),
        (y, -4, 4),
        (PlotLabel, "Gaussian"),
        (ColorLegend, True),
      )

notebook cells, the CLI

#A preset view

The initial view is attribute-driven; drag to change it, then double-click to snap back here.

source

Plot3D(
        Sin(x) * Cos(y),
        (x, -3.14, 3.14),
        (y, -3.14, 3.14),
        (Azimuth, 200),
        (Elevation, 40),
        (Zoom, 0.8),
      )

notebook cells, the CLI

#Two overlaid surfaces

A list of expressions draws several surfaces on one shared z-scale, each in its own colour. Two ripples offset in z stack as clean layers.

source

Plot3D(
        [Sin(x) * Cos(y) + 2.5, Cos(x) * Sin(y) - 2.5],
        (x, -3.14, 3.14),
        (y, -3.14, 3.14),
      )

notebook cells, the CLI

#Axes off

source

Plot3D(x ^ 2 - y ^ 2, (x, -2, 2), (y, -2, 2), (Axes, "false"))

notebook cells, the CLI

Manipulate

#Sweep a frequency (press ▶)

The slider fills _k and re-samples the whole grid; press ▶ to sweep it.

source

Manipulate(
            Plot3D(Sin(k * x) * Cos(k * y), (x, -3.14, 3.14), (y, -3.14, 3.14)),
            (k, 0.5, 3),
          )

notebook cells, the CLI

#Morph between two surfaces

A blend parameter t in [0, 1] interpolates a saddle into a ripple. Press ▶ to watch it morph.

source

Manipulate(Plot3D(
                   (1 - t) * (x ^ 2 - y ^ 2) + t * Sin(x) * Cos(y) * 4,
                   (x, -2, 2),
                   (y, -2, 2),
                 ), (t, 0, 1))

notebook cells, the CLI

#A travelling wavefront (animate the phase)

Animating the phase p sends ripples outward from the origin.

source

Manipulate(
            Plot3D(Sin(2 * Sqrt(x ^ 2 + y ^ 2) - p), (x, -4, 4), (y, -4, 4)),
            (p, 0, 6.283),
          )

notebook cells, the CLI

GPU evaluation

#A surface evaluated on the GPU

The grid (here 100×100) is computed in a compute shader, then drawn through the same SVG surface. Needs a WebGPU browser; otherwise it renders on the CPU.

source

Plot3D(Sin(x) * Cos(y), (x, -3.14, 3.14), (y, -3.14, 3.14), (Gpu, 100))

notebook cells, the CLI

Color

#A surface on the magma gradient

A lone surface takes the gradient by height (viridis by default); ColorFunction -> "Magma" is Wolfram's spelling of the gradient attribute. Several surfaces take one color each from the Discrete scheme instead.

source

Plot3D(
        Sin(x) * Cos(y),
        (x, -3, 3),
        (y, -3, 3),
        (ColorFunction, "Magma"),
        (ColorLegend, True),
      )

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.