ListPlot: index vs value
A bare number list plots as index (x) vs value (y).
source
ListPlot([3, 1, 4, 1, 5, 9, 2, 6])notebook cells, the CLI
Chart
<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
ListPlot & ListLinePlot
ListLinePlot: connected
source
ListLinePlot([3, 1, 4, 1, 5, 9, 2, 6])notebook cells, the CLI
ListPlot: explicit (x, y) pairs
A list of numeric pairs is data, drawn as dots at their own coordinates rather than at index positions.
source
ListPlot([(1, 1), (2, 4), (3, 9), (4, 16), (5, 25)])notebook cells, the CLI
BarChart
Value list with category labels
source
BarChart(
[12, 19, 7, 15, 10],
(Labels, ["Mon", "Tue", "Wed", "Thu", "Fri"]),
(Label, "Daily commits"),
)notebook cells, the CLI
Negative values dip below the baseline
source
BarChart([3, -2, 5, -1, 4])notebook cells, the CLI
Histogram
Auto bin count (Sturges' rule)
The bin count defaults to Sturges' rule; pass bins to override.
source
Histogram([1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 6, 6, 7])notebook cells, the CLI
Explicit bin count
source
Histogram([1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 6, 6, 7], (Bins, 4))notebook cells, the CLI
PieChart
Proportions of a value list
source
PieChart([35, 25, 20, 20], (Labels, ["A", "B", "C", "D"]))notebook cells, the CLI
BoxWhiskerChart
One box per series
data is a list of raw value lists; each series is reduced to its five-number summary (min, Q1, median, Q3, max).
source
BoxWhiskerChart(
[[2, 4, 4, 4, 5, 5, 7, 9], [1, 2, 3, 3, 3, 4, 4, 10]],
(Labels, ["A", "B"]),
)notebook cells, the CLI
ArrayPlot
A matrix as a heatmap
Each cell's value maps to a colour ramp from blue (low) to accent (high). Cells are square: the frame's height follows rows/cols, up to a square.
source
ArrayPlot([[0, 1, 2, 3], [1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6]])notebook cells, the CLI
A 0/1 matrix is two-tone
Like Wolfram's white/black: 0 is the background, 1 the foreground, so it follows the theme.
source
ArrayPlot([
[1, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0],
[1, 0, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 0, 0],
[1, 1, 0, 0, 1, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 0],
[1, 0, 1, 0, 0, 0, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 1],
])notebook cells, the CLI
A single wide row
source
ArrayPlot([[0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]])notebook cells, the CLI
DiscretePlot
A stem plot
A vertical stem from the zero baseline to each value, with a dot on top.
source
DiscretePlot([1, -2, 3, 4, -1, 2])notebook cells, the CLI
Chosen from the data
A short number list is bars
No type: the shape decides -- a short number list is bars, a long one a histogram, pairs are points, a matrix is an array plot -- chooseChartType, which is also the rule behind the Chart head.
source
Chart([3, 1, 4, 1, 5])notebook cells, the CLI
A long number list is a histogram
source
Chart([
5,
3,
8,
1,
9,
2,
7,
4,
6,
3,
5,
8,
2,
9,
1,
4,
7,
3,
6,
5,
2,
8,
4,
1,
9,
])notebook cells, the CLI
Pairs are points
source
Chart([[0, 1], [1, 3], [2, 2], [3, 5]])notebook cells, the CLI
A matrix is an array plot
source
Chart([[1, 0, 2], [0, 3, 1], [2, 1, 0]])notebook cells, the CLI
Color
Wedges in another discrete scheme
A pie's wedges are categories, so they take the Discrete scheme (default tableau10); an array plot's cells are values, so they take the gradient.
source
PieChart([3, 1, 4, 1, 5], (Discrete, "dark2"))notebook cells, the CLI
An array plot on a gradient
source
ArrayPlot([[1, 0, 2], [0, 3, 1], [2, 1, 0]], (ColorFunction, "Cividis"))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.