GraphPlot

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

Demos·packages/components/src/graphics-box.ts· draws Plot, ParametricPlot, PolarPlot, ListPolarPlot, ListPlot, ListLinePlot, VectorPlot, StreamPlot, ContourPlot, ListContourPlot, DensityPlot, ListDensityPlot, GraphPlot, TreeGraph, LayeredGraphPlot, Dendrogram, TorusSquare, BarChart, Histogram, PieChart, BoxWhiskerChart, ArrayPlot, DiscretePlot, Chart, Show, Permutahedron, Simplex, CrossPolytope, Hypercube, Associahedron, Braid, Permutation, SetPartition, Diagram, BraidClosure, IntegerPartition, StandardTableau, Composition, Subset, PlaneTree, BinaryTree, DyckPath, LatticePath

Stories

TreePlot

#A rooted tree, laid out tidily by depth

Leaves take sequential x left-to-right; each internal node sits at the mean x of its children.

source

TreeGraph({
            "label" -> "root",
            "children" -> [{"label" -> "a", "children" -> [
                                                            {"label" -> "a1"},
                                                            {"label" -> "a2"},
                                                          ]}, {"label" -> "b"}],
          })

notebook cells, the CLI

GraphPlot

#Undirected graph on a deterministic circular layout

Node order (and so position) comes from first appearance in edges when nodes is omitted.

source

GraphPlot({"edges" -> [
                        ["a", "b"],
                        ["b", "c"],
                        ["c", "d"],
                        ["d", "a"],
                        ["a", "c"],
                      ]})

notebook cells, the CLI

#Directed: arrowheads on each edge

source

GraphPlot({"edges" -> [["a", "b"], ["b", "c"], ["c", "a"]]}, (Directed, True))

notebook cells, the CLI

LayeredGraphPlot

#A DAG laid out top-to-bottom by longest-path layer

Layer(v) = 1 + the longest path from any source into v; nodes within a layer keep a deterministic (first-seen) order.

source

LayeredGraphPlot({"edges" -> [
                               ["a", "b"],
                               ["a", "c"],
                               ["b", "d"],
                               ["c", "d"],
                               ["d", "e"],
                             ]})

notebook cells, the CLI

Dendrogram

#A merge tree, brackets drawn at each merge height

Leaves sit along the x axis; each internal node's height sets where its bracket is drawn (inferred as one more than its tallest child when omitted).

source

Dendrogram({
             "height" -> 3,
             "children" -> [
                             {"height" -> 1, "children" -> [
                                                             {"label" -> "x"},
                                                             {"label" -> "y"},
                                                           ]},
                             {"height" -> 2, "children" -> [
                                                             {"label" -> "z"},
                                                             {"label" -> "w"},
                                                           ]},
                           ],
           })

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.