Graphics
<graphics-box value="Show(LatticeTiles(QuadraticIntegers(_d), ColorRules -> […]), …)"> — Wolfram's Show: layers in one coordinate frame, sharing one view, each on its own canvas. LatticeTiles(ring, …) draws a lattice's faces: ColorRules -> [test -> color, …] colors them (a color, Opacity(a, color), or ColorData(scheme, value, Band -> w)), ColorMixing combines the colors of matching rules (Wolfram's first match by default; "Normal", or the order-free "Screen", "Add" and "Multiply"), and BoundaryStyle -> [test -> directive, …] draws their edges, nested in rule order.
- GridLines -> [10, 10] (every 10 units along each axis of the frame: rhombic for a hexagonal ring), GridLinesStyle, Axes -> True, AxesStyle, Ticks -> None, and AspectRatio -> Automatic for true scale. - Its wildcards (_d) are the variables of the scope it sits in: the nearest element declaring Variables, whose controls (a StringTemplate caption's holes, say) move them. - The legend is made from the rules and is how their colors change: a swatch opens a color, a bar the color schemes, ↺ the scheme's padding past its ends, ⇄ reverses it. - Selection -> _s: shift/⌘-click selects several; the element writes them to the variable _s (a list of lattice points), and showing them is up to the page. - PolytopeFaces(Permutahedron(4)) is a polytope's faces under a camera, several sharing one frame; ViewPoint, ViewVertical, ViewAngle, ViewCenter, SphericalRegion -> True and Magnification aim it (only a camera frame reads them). Drag to orbit; ⌘/Ctrl + wheel or pinch to zoom. - GestureHandling -> "cooperative" (the default), "greedy" or "none": greedy makes every wheel zoom, none none; the default leaves a plain wheel to the page, except on a full-window figure.
Drag to pan; Esc clears the selection; 0 resets the view.
A graph or tree (GraphPlot, TreeGraph, LayeredGraphPlot, Dendrogram) and TorusSquare(2, 3) are diagram boxes: DiskBox vertices, LineBox or ArrowBox edges and InsetBox labels in a frame of their own. The torus square's point follows the page's clock unless Phase -> 0.32 pins it.
A 2-D plot is a GraphicsBox too: <graphics-box value="Plot(Sin(x), (x, 0, 2*Pi), GridLines -> True)">, and ParametricPlot, PolarPlot, ListPlot, ListLinePlot and ListPolarPlot likewise, with their Wolfram options (PlotRange, PlotLabel, Filling, ColorFunction, Epilog, …). The page's kernel samples the expression, the samples lower to a curve (LineBox), dots (PointBox) or a filled region (PolygonBox) in data coordinates, and hovering reads out the nearest sample of each series. Inside a Manipulate, its wildcards (_a) follow the controls.
So is a chart of data: <graphics-box value="BarChart([3, 1, 4], Labels -> ["a", "b", "c"])">, and Histogram, PieChart, BoxWhiskerChart, ArrayPlot of a matrix and DiscretePlot likewise. A bar or a cell is a RectangleBox, a pie's wedge a DiskBox sector, a stem a LineBox and its dot a PointBox. Chart(data) chooses the member from the data's shape (Chart(data, "pie") names it). An option is the attribute its name kebab-cases to: Labels, Label (the title), Bins, Discrete (the scheme that colors categories, default tableau10), Gradient (what an array plot's cells take by value, default viridis) and Reverse.
So is a field plot: <graphics-box value="ContourPlot(x^2 - y^2, (x, -3, 3), (y, -3, 3))">, and DensityPlot and the List forms (ListContourPlot, ListDensityPlot of a grid). The page's kernel samples the expression on a grid (N per side); a contour is a LineBox per level (Levels: a count or a list), or with Filled -> True a RasterBox of the bands, and a density plot is a RasterBox of cells colored by value (ColorFunction, Reverse), with PlotLegends -> True adding a color bar and PlotRange -> (zmin, zmax) pinning its scale.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value | string | "" | The Show(…) expression, in Epsil. |
height | number | 480 | Height of the plot, in CSS pixels. |
imageSize attribute image-size | string | "" | Wolfram's ImageSize, as Show written in markup lowers it: [Automatic, h] sets the height. |
ground | string | DEFAULT_GROUND | The ground the layers draw on: one of the palettes' grounds. |
selection | string | "" | Options as attributes, as Show written in markup lowers them; each one Epsil. |
aspectRatio attribute aspect-ratio | string | "" | |
gestureHandling attribute gesture-handling | string | "" | |
legendAt attribute legend-at | string | "right" | Where the legend goes: below, right, a corner to overlay, none.reflects |
captionAt attribute caption-at | string | "below" | Where the info strip (what is under the pointer, or the layer as a whole) goes: below, a side, none.reflects |
As a web component
Plain custom elements, no framework required: import @enumeratio/frontend for the side effect and write <graphics-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 -- bindings: bind with :bindings.prop="…" directly on the tag.