Plot

<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

Curves

Sine over one period

source

Plot(Sin(x), (x, -6.283, 6.283))

notebook cells, the CLI

A cubic

source

Plot(x ^ 3 - 3x, (x, -3, 3))

notebook cells, the CLI

A pole (1/x)

The sample straddling 0 is non-finite, so the curve splits into two segments instead of streaking across the asymptote.

source

Plot(1 / x, (x, -3, 3))

notebook cells, the CLI

A wider domain, more samples

The playground page's demo highlighted a $…$ LaTeX island parsing to this same expression -- moot for a story, whose expr is already parsed MathJSON; PlotPoints raises the resolution over the wider domain.

source

Plot(x * Sin(x), (x, -12.566, 12.566), (PlotPoints, 240))

notebook cells, the CLI

Log y-scale (exponential ⇒ straight line)

A ScalingFunctions -> "Log" y-axis renders eˣ as a straight line; the range labels still read the raw values. Non-positive samples fall outside the log domain and gap out.

source

Plot(Exp(x), (x, 0, 5), (ScalingFunctions, "Log"))

notebook cells, the CLI

Several series

A list of expressions overlays one curve per entry, each in its own colour. Hover to read every series at the pointer's x.

source

Plot([Sin(x), Cos(x), Sin(x) * Cos(x)], (x, -6.283, 6.283))

notebook cells, the CLI

Parametric curve (a Lissajous figure)

ParametricPlot reads the pair as (x(t), y(t)) and traces it over the iterator's range -- Wolfram's own separate head for this, rather than a flag on Plot.

source

ParametricPlot((Sin(3t), Sin(4t)), (t, 0, 6.283), (PlotPoints, 400))

notebook cells, the CLI

Points mode

source

Plot(Sin(x), (x, 0, 6.283), (Mode, "points"), (PlotPoints, 40))

notebook cells, the CLI

Chrome & color

Grid, fill, legend, labels

The Plot-style chrome, all opt-in -- light gridlines, a filled area to the zero axis, a legend keyed to the series, an axis label, a forced PlotRange, and a PlotLabel title.

source

Plot(
      [Sin(x), Cos(x)],
      (x, -6.283, 6.283),
      (GridLines, True),
      (Filling, True),
      (PlotLegends, True),
      (AxesLabel, "x"),
      (PlotRange, (-1.2, 1.2)),
      (PlotLabel, "sin & cos"),
    )

notebook cells, the CLI

Colour by value (ColorFunction)

ColorFunction -> "y" ramps the stroke from blue (low) to accent (high) by height; "x" ramps left-to-right.

source

Plot(Sin(x), (x, -6.283, 6.283), (ColorFunction, "y"))

notebook cells, the CLI

Axes off (bare curve)

source

Plot(Sin(x), (x, -6.283, 6.283), (Axes, "false"))

notebook cells, the CLI

Colored by height on a gradient

ColorFunction -> "y" colors the curve along y; Gradient picks which one (default viridis), and Reverse runs it the other way. Several series take the Discrete scheme instead: here Set1, not the default tableau10.

source

Plot(
      Sin(x),
      (x, -6.283, 6.283),
      (ColorFunction, "y"),
      (Gradient, "magma"),
      (Reverse, True),
    )

notebook cells, the CLI

Series in another discrete scheme

source

Plot([Sin(x), Cos(x)], (x, -6.283, 6.283), (Discrete, "set1"), (Legend, True))

notebook cells, the CLI

Manipulate

Two parameters

a scales the frequency, b shifts the phase -- each free parameter becomes its own slider and fills its wildcard.

source

Manipulate(Plot(Sin(a * x + b), (x, -6.283, 6.283)), (a, 1, 5), (b, 0, 6.283))

notebook cells, the CLI

Amplitude · frequency · phase

Three sliders with explicit initial values -- the classic sinusoid knobs.

source

Manipulate(
            Plot(A * Sin(w * x + p), (x, -6.283, 6.283), (PlotRange, (-2, 2))),
            ((A, 1), 0, 2),
            ((w, 2), 0.5, 6),
            (p, 0, 6.283),
          )

notebook cells, the CLI

Animate the phase (press ▶)

Press ▶ on t's slider to watch the wave travel; ⏸ to stop.

source

Manipulate(Plot(Sin(x - t), (x, -6.283, 6.283)), (t, 0, 6.283))

notebook cells, the CLI

A movable, resizable bump

c slides a Gaussian bump left/right, s widens it.

source

Manipulate(Plot(
                 Exp(-((x - c) ^ 2 / s)),
                 (x, -6.283, 6.283),
                 (PlotRange, (0, 1.1)),
                 (Filling, True),
               ), ((c, 0), -5, 5), ((s, 1), 0.2, 4))

notebook cells, the CLI

A stepped, integer harmonic

A step of 1 makes n an integer knob -- sweep the harmonics with ▶.

source

Manipulate(
            Plot(Sin(n * x), (x, -6.283, 6.283), (GridLines, True)),
            ((n, 1), 1, 8, 1),
          )

notebook cells, the CLI

A discrete choice

A control's second argument as a list becomes a setter over discrete values.

source

Manipulate(
            Plot(Sin(k * x), (x, -6.283, 6.283), (GridLines, True)),
            (k, [1, 2, 3, 5]),
          )

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.

Plot ​

Stories

Curves

#Sine over one period

#A cubic

#A pole (1/x)

#A wider domain, more samples

#Log y-scale (exponential ⇒ straight line)

#Several series

#Parametric curve (a Lissajous figure)

#Points mode

Chrome & color

#Grid, fill, legend, labels

#Colour by value (ColorFunction)

#Axes off (bare curve)

#Colored by height on a gradient

#Series in another discrete scheme

Manipulate

#Two parameters

#Amplitude · frequency · phase

#Animate the phase (press ▶)

#A movable, resizable bump

#A stepped, integer harmonic

#A discrete choice

Props

As a web component

Plot

Sine over one period

A cubic

A pole (1/x)

A wider domain, more samples

Log y-scale (exponential ⇒ straight line)

Several series

Parametric curve (a Lissajous figure)

Points mode

Grid, fill, legend, labels

Colour by value (ColorFunction)

Axes off (bare curve)

Colored by height on a gradient

Series in another discrete scheme

Two parameters

Amplitude · frequency · phase

Animate the phase (press ▶)

A movable, resizable bump

A stepped, integer harmonic

A discrete choice