The trefoil T(2, 3) on the glued square
The knot is a straight line of slope q/p. The point travels it on the page's clock, and the two dials count the windings round the hole and the tube.
source
TorusSquare(2, 3)notebook cells, the CLI
TorusSquare
<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.
Stories
Torus knots
The point pinned to a phase
Phase pins the point and the figure stops watching the clock; Dials -> False leaves the line alone.
source
TorusSquare(3, 2, (Phase, 0.32), (Dials, "false"))notebook cells, the CLI
T(3, 7), winding faster one way than the other
ColorFunction names the discrete scheme whose first two colors tell the two circles apart.
source
TorusSquare(3, 7, (ColorFunction, "set1"))notebook cells, the CLI
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.