A 3×3 matrix
source
BarChart3D([[1, 2, 3], [2, 4, 3], [3, 1, 5]])notebook cells, the CLI
BarChart3D
<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.
Stories
Bars
A single row
A flat list is one row of bars — the 3-D counterpart of a plain BarChart.
source
BarChart3D([3, 1, 4, 1, 5, 9, 2, 6], (Label, "digits of π"))notebook cells, the CLI
Labelled categories
col-labels and row-labels take comma-separated categories, drawn just outside the near floor edges.
source
BarChart3D([[4, 2, 3], [1, 5, 2]], (ColLabels, "a,b,c"), (RowLabels, "x,y"))notebook cells, the CLI
Tighter packing, steeper view
gap is the space between neighbouring bars as a fraction of a cell; at 0 the bars touch.
source
BarChart3D(
[[1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7]],
(Gap, 0.05),
(Elevation, 45),
(Azimuth, 40),
)notebook cells, the CLI
Negative values
When the data straddles zero, the zero plane sits inside the cube and negative bars hang beneath it.
source
BarChart3D([[-2, 1, 3], [2, -1, 1]])notebook cells, the CLI
A pinned height scale
zrange pins the height scale so several charts can be compared; axes="false" drops the projected axis box.
source
BarChart3D([[1, 2], [2, 3]], (ZRange, "0,10"), (Axes, "false"))notebook cells, the CLI
Color
Bars on the cividis gradient
Bars take their height on the gradient; the sides are the same color, darkened.
source
BarChart3D([[1, 2, 3], [2, 4, 1]], (ColorFunction, "Cividis"))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.