add individual examples (start)

docs/examples/a_stack.js

@@ -0,0 +1,5 @@
+// Three square boxes containing the letter "A", with two boxes stacked vertically on the left side and one box on the right side.
+let a = Node('A', {aspect: 1});
+let n1 = VStack([a, a]);
+let n2 = HStack([n1, a]);
+return Frame(n2, {margin: 0.1});

docs/examples/axis_diagram.js

@@ -0,0 +1,21 @@
+// A horizontal axis with ticks at "q/\gamma", "Bq/\gamma", "q", "Bq", and "\gamma^{\prime}q$ labeled at the bottom. On the top, "q/\gamma" is labeled with "Prev", "q" is labeled with "Current", and "\gamma^{\prime}q" is labeled with "Next". There is a semi-transparent box ranging from "Bq/\gamma" to "Bq" labeled with "Lagging" on the top left, "Leading" on the top right, and "Patent Coverage" across the bottom.
+
+// ticks (top and bottom)
+let ticks = [
+  [0.1, Tex('q/\\gamma')], [0.3, Tex('B q/\\gamma')], [0.5, Tex('q')],
+  [0.7, Tex('B q')], [0.9, Tex('\\gamma^{\\prime} q')]
+];
+let main = HAxis(ticks, {tick_pos: 'both', label_pos: 'top', tick_size: 0.07});
+let tops = [[0.1, 'Prev'], [0.3, ''], [0.5, 'Current'], [0.7, ''], [0.9, 'Next']];
+let top = HAxis(tops, {line_stroke: 0, tick_size: 0.05});
+
+// shaded box with albels
+let vline = VLine(0.5, {opacity: 0.25, stroke_dasharray: 4});
+let shade = Rect({rect: [0.3, 0, 0.7, 1], stroke: 'black', fill: '#BBB', opacity: 0.15});
+let lag = Place(Text('Lagging', {stroke: '#444'}), {pos: [0.4, 0.15], rad: 0.08});
+let led = Place(Text('Leading', {stroke: '#444'}), {pos: [0.6, 0.15], rad: 0.08});
+let pat = Place(Text('Patent Coverage', {stroke: '#444'}), {pos: [0.5, 0.9], rad: 0.18});
+
+// group and frame
+let group = Group([vline, shade, main, top, lag, led, pat], {aspect: 3});
+return Frame(group, {margin: 0.05});

docs/examples/axis_ticks.js

@@ -0,0 +1,6 @@
+// A horizontal axis with 4 ticks. On the top side, the ticks are labeled "0", "i", "j", and "1". On the bottom side, the middle two ticks are labeled in Latex with "q\_{i,1}" and "q\_{i,2}".
+let ticks1 = zip([0, 0.35, 0.7, 1], [Tex('0'), Tex('i'), Tex('j'), Tex('1')]);
+let ticks2 = zip([0.35, 0.7], [Tex('q_{i,1}'), Tex('q_{j,2}')]);
+let axis1 = HAxis(ticks1, {tick_size: 0.5, tick_pos: 'both'});
+let axis2 = HAxis(ticks2, {tick_size: 0.5, label_pos: 'out', label_offset: 0});
+return Frame(Group([axis1, axis2]), {aspect: 6, margin: [0.05, 2]});

docs/examples/bar_plot.js

@@ -0,0 +1,3 @@
+// Bar plot with 5 bars whose labels range from "A" to "E" and whose heights have values between 0 and 10.
+let b = BarPlot([['A', 5], ['B', 8], ['C', 10], ['D', 6], ['E', 3]]);
+return Frame(b, {margin: 0.2});

docs/examples/copy_icon.js

@@ -0,0 +1,8 @@
+// A 20x25 pixel icon of two rectangles shaped like pieces of paper partially overlaid on one another.
+let x = 0.35;
+let rects = Points(
+  [[x, x], [1-x, 1-x]],
+  {shape: Rect(), size: x}
+);
+let frame = Frame(rects, {margin: 0.05});
+return SVG(frame, {size: [20, 25]});

docs/examples/distribution_plot.js

@@ -0,0 +1,21 @@
+// A plot with an exponentially decaying line. It is divided horizontally at a point "R" with a dashed line. To the left of "R" it is shaded dark gray, and to the right of "R" it is shaded light gray. There are also x-axis ticks a "0" and "1" and y-axis ticks at "0". The x-axis is labeled "Worker Index" and the y-axis is labeled "Research Aptitude". The graph is framed with the title "Research Aptitude Distribution".
+
+// define params
+let [β, R] = [0.5, 0.2];
+let xlim = [xlo, xhi] = [0.0001, 1];
+let ylim = [ylo, yhi] = [0, 5];
+let f = x => min(yhi, (1-β)*x**(-β));
+
+// create lines
+let sr = SymFill({fy1: 0, fy2: f, xlim: [xlo, R], fill: '#555', opacity: 0.4, N: 250});
+let sp = SymFill({fy1: 0, fy2: f, xlim: [R, xhi], fill: '#BBB', opacity: 0.4, N: 250});
+let b = SymPath({fy: f, xlim, stroke: '#333', N: 250});
+let bline = VLine(R, {lim: ylim, stroke_dasharray: 3});
+
+// plot and frame
+let plot = Plot([sr, sp, b, bline], {
+  aspect: 1.5, ylim, xlabel_offset: 0.1, ylabel_offset: 0.05,
+  xticks: [[0, '0'], [1, '1'], [R, 'R'], [2, '']], yticks: [0],
+  xlabel: 'Worker Index', ylabel: 'Research Aptitude'
+});
+return TitleFrame(plot, 'Research Aptitude Distribution', {margin: 0.2});

docs/examples/download_arrow.js

@@ -0,0 +1,11 @@
+// A 25x25 pixel icon in which an arrow is pointing downward into a curved tray.
+let [mid, rad] = [0.25, 0.06];
+let arrow = Arrow(-90, {
+  pos: [0.5, 0.85], head: 0.25, tail: 0.75
+});
+let base = Bezier2Path([0, 1-mid], [
+  [0, 1-rad], [[rad, 1], [0, 1]], [1-rad, 1], [[1, 1-rad], [1, 1]], [1, 1-mid]
+]);
+let shape = Group([base, arrow]);
+let frame = Frame(shape, {margin: 0.1});
+return SVG(frame, {size: 25, prec: 2});

docs/examples/economist_plot.js

@@ -0,0 +1,25 @@
+// A bar plot in the style of the Economist magazine. There are roughly 40 densely packed blue bars with random heights between 0 and 70. The y-axis has horizontal grid lines at 0, 25, 50, and 75, while the x-axis ranges between 0 and 40.
+
+// plot parameters
+let n = 41;
+let ymax = 70;
+let xticks = range(0, n+10, 10);
+let yticks = linspace(0, 100, 5);
+
+// generate random data
+let vals = range(n).map(x => ymax*random(x));
+
+// make bars and y-labels
+let bars = VBars(vals, {
+  integer: true, bar_fill: '#1e5c99', bar_stroke: 'none'
+});
+let labs = Points(
+  yticks.map(x => [Anchor(Text(x)), [n+3, x+4]]), {size: 1}
+);
+let plot = Plot([bars, labs], {
+  aspect: phi, xlim: [-1, n+4], ylim: [0, ymax+5], xticks, yticks,
+  xaxis_tick_pos: 'down', yaxis: false, ygrid: yticks
+});
+
+// return framed plot
+return Frame(plot, {margin: 0.2});

docs/examples/equil_plot.js

@@ -0,0 +1,16 @@
+// Plot of two lines that both originate at zero and intersect at a single point, one that is convext and one that is concave. The intersection point is labeled as k1* and k2*, both on the axes and with grid lines. The x-axis label is "Capital Stock 1 (k1)" and the y-axis label is "Capital Stock 2 (k2)".
+let klim = [0.0, 1.5]; let [a, b] = [1.0, 0.5];
+let kzero1 = k1 => a*k1**b; let kzero2 = k2 => a*k2**b;
+let kstar = a**(1/(1-b));
+let path1 = SymPath({fy: kzero1, xlim: klim});
+let path2 = SymPath({fx: kzero2, ylim: klim});
+let note1 = Note('\\dot{k}_1=0', {pos: [1.62, 1.24], rad: 0.09, latex: true});
+let note2 = Note('\\dot{k}_2=0', {pos: [1.21, 1.6], rad: 0.09, latex: true});
+let xlabel = HStack([Text('Capital Stock 1 '), Tex('(k_1)')]);
+let ylabel = HStack([Text('Capital Stock 2 '), Tex('(k_2)')]);
+let plot = Plot([path1, path2, note1, note2], {
+  aspect: phi, xlim: klim, ylim: klim, xaxis_pos: 0, xaxis_tick_pos: 'both',
+  xticks: [[kstar, Tex('k_1^{\\ast}')]], yticks: [[kstar, Tex('k_2^{\\ast}')]],
+  xlabel, ylabel, grid: true, label_offset: 0.12
+});
+return Frame(plot, {margin: 0.25});

docs/examples/ex_boxes.js

@@ -0,0 +1,8 @@
+// An array of partially overlapping squares depicting the letter "X". The squares for one direction are in red, while the squares in the other direction are in blue.
+let [shape, size, num] = [Rect(), 0.1, 16];
+let pos1 = linspace(0, 1, num).map(x => [x, x]);
+let pos2 = linspace(0, 1, num).map(x => [1 - x, x]);
+let p1 = Points(pos1, {shape, size, stroke: 'red'});
+let p2 = Points(pos2, {shape, size, stroke: 'blue'});
+let gg = Group([p1, p2], {opacity: 0.75});
+return Frame(gg, {margin: 0.15});

docs/examples/ex_plot.js

@@ -0,0 +1,5 @@
+// Plot showing three points, each one marked with an "x" and the label "hello". The x-axis ranges from -1 to 1, while the y-axis ranges from 0 to 1.
+let shape = HStack(['✗', 'hello'].map(Text), {spacing: 0.1});
+let points = Points([[-0.3, 0.3], [0.4, 0.6], [-0.5, 0.8]], {shape, size: 0.1});
+let plot = Plot(points, {xlim: [-1, 1], ylim: [0, 1]});
+return Frame(plot, {margin: 0.2});

docs/examples/exponential_plot.js

@@ -0,0 +1,18 @@
+// Plot of the path of a line that starts at a high level y0*, then at time t0 begins to decay exponentially down to a lower level y1*. The x-axis has a label for time t0, and the y-axis has labels for y0* and y1*. Each of these are also denoted with dashed lines in the plot. The x-axis label is "Time (t)" and the y-axis label is "Output (y)".
+let [t0, ymax, yss0, yss1] = [0.2, 1.4, 1.0, 0.7];
+let path0 = HLine(1, {x1: 0, x2: t0, stroke_width: 2});
+let path1 = SymPath({
+    fy: x => min(yss0, yss1 + (yss0-yss1)*exp(-6*(x-t0))),
+    xlim: [0, 1], stroke_width: 2
+});
+let start = VLine(t0, {lim: [0, ymax], stroke_dasharray: [4, 4]});
+let steady1 = HLine(1, {lim: [0, 1], stroke_dasharray: [4, 4]});
+let steady2 = HLine(yss1, {lim: [0, 1], stroke_dasharray: [4, 4]});
+let plot = Plot([path0, path1, start, steady1, steady2], {
+    xlim: [0, 1], ylim: [0, ymax], aspect: phi,
+    xlabel: 'Time (t)', ylabel: 'Output (y)',
+    xticks: [[t0, Tex('t_0')]], label_offset: 0.1,
+    yticks: [[yss1, Tex('y^{\\ast}_1')], [1, Tex('y^{\\ast}_0')]]
+});
+let frame = Frame(plot, {padding: 0.2});
+return frame;

docs/examples/flow_diagram.js

@@ -0,0 +1,14 @@
+// A flow diagram with three nodes arranged horizontally: "Input", "Causal Self Attention", and "Perceptron". There are unidirectional arrows going from left to right, connecting the first and second nodes and the second and third nodes, each with the label "Layer Norm". Each node is a rectangle with slightly rounded corners.
+let net = Network([
+  ['input', 'Input', [0.15, 0.5], [0.1, 0.2]],
+  ['attn', ['Causal Self', 'Attention'], [0.5, 0.5], [0.1, 0.4]],
+  ['percep', 'Perceptron', [0.85, 0.5], [0.1, 0.2]],
+], [
+  ['input', 'attn'], ['attn', 'percep']
+], {
+  aspect: 8, directed: true, node_border_radius: 0.05, arrow_size: 0.03
+});
+let notes = Points([[0.32, 0.4], [0.67, 0.4]], {
+    shape: Text('Layer Norm'), size: 0.08
+});
+return Group([net, notes]);

docs/examples/gelu_plot.js

@@ -0,0 +1,12 @@
+// Plot of three lines, one in red which is max(0,x), another in blue which is the same but with a slight dip at 0, and a final dashed horizontal line at 0. There is a legend labeling these lines as "ReLU" for the red line and "GELU" for the blue line. The x-axis ranges from -4 to 3, making sure there is a tick at 0.
+let xlim = [-4, 3]; let ylim = [-1, 3];
+let rargs = {stroke: red, stroke_width: 2};
+let bargs = {stroke: blue, stroke_width: 2};
+let relu = SymPath({fy: x => max(0, x), xlim, ...rargs});
+let gelu = SymPath({fy: x => x*sigmoid(x), xlim, ...bargs});
+let zero = HLine(0, {lim: xlim, stroke_dasharray: 4});
+let leg = Legend([[rargs, 'ReLU'], [bargs, 'GELU']], {
+    pos: [-2, 2], rad: 0.55, hspacing: 0.1, vspacing: 0.2
+});
+let plot = Plot([zero, relu, gelu, leg], {aspect: phi, ylim, xticks: 8});
+return Frame(plot, {margin: 0.2});

docs/examples/gum_blocks.js

@@ -0,0 +1,6 @@
+// Letters stacked like blocks spelling out the word "GUM".
+let [g, u, m] = 'GUM'.split('').map(t =>
+  Node(t, {aspect: 1, fill: '#EEE', border: 3})
+);
+let s = VStack([g, HStack([u, m])], {expand: false});
+return Frame(s, {margin: 0.02});

docs/examples/homotopy.js

@@ -0,0 +1,11 @@
+// Wide-form plot depicting various curves traversing in the vertical dimension from 0 to 1. Some of the curves span the whole distance, others loop back to the origin, while others form independent loops. The x-axis is labeled "Solutions (x)" and the y-axis is labeled "Deformation path (t)".
+let path1 = SymPath({fy: x => 6*(x-0.1)*(1.2-3*x), xlim: [0.1, 0.4]});
+let path2 = SymPath({fx: y => 0.6 + 0.25*cos(3*y), ylim: [0, 1]});
+let ellipse1 = Ellipse({pos: [0.5, 0.3], rad: [0.05, 0.1]});
+let ellipse2 = Ellipse({pos: [0.8, 0.7], rad: [0.05, 0.15]});
+let plot = Plot([path1, path2, ellipse1, ellipse2], {
+    aspect: 2, xlim: [0, 1], ylim: [0, 1], xticks: [], yticks: [0, 1],
+    xlabel: 'Solutions (x)', ylabel: 'Deformation Path (t)', label_offset: 0.05,
+});
+let frame = Frame(plot, {border: 1, margin: 0.15});
+return frame;

docs/examples/inverted_plot.js

@@ -0,0 +1,18 @@
+// A plot showing two exponentials with only an x-axis with ticks ranging from -0.5 to 1.5. There is a steep exponential decay starting at 0 in blue on the top side of the axis and a shallow exponential decay starting at 0 on the bottom side in red.
+
+// define params
+let [αi, αr] = [4, 2];
+let xlim = [-0.5, 1.5];
+let xlim1 = [0, 1.5];
+
+// make shaded lines
+let [fi, fr] = [αi, αr].map(α => (x => α*exp(-α*x)));
+let si = SymFill({fy1: fi, fy2: 0, xlim: xlim1, fill: blue, opacity: 0.5});
+let sr = SymFill({fy1: x => -fr(x), fy2: 0, xlim: xlim1, fill: red, opacity: 0.5});
+
+// plot and frame
+let plot = Plot([si, sr], {
+  aspect: 2, xaxis_pos: 0, xlim, yaxis: false,
+  xticks: [-0.5, 0, 0.5, 1, 1.5], xaxis_tick_pos: 'both'
+});
+return Frame(plot, {margin: 0.1});

docs/examples/inward_spiral.js

@@ -0,0 +1,10 @@
+// A plot of a curve spiraling inwards counterclockwise, with axes in both directions ranging from -1 to 1.
+let alpha = 0.1;
+let tlim = [0, 50];
+let s = SymPath({
+  fx: t => exp(-alpha*t) * cos(t),
+  fy: t => exp(-alpha*t) * sin(t),
+  tlim, N: 1000,
+});
+let p = Plot(s, {xlim: [-1, 1], ylim: [-1, 1]});
+return Frame(p, {margin: 0.15});

docs/examples/legend_plot.js

@@ -0,0 +1,9 @@
+// A plot of two lines that are zero at 0 and 2 but are positive inbetween. One of the lines is solid blue while the other line is dashed red. The plot has a legend in the top right naming the blue line "Hello World" and the red line "Testing Longer String".
+let args1 = {stroke: blue};
+let args2 = {stroke: red, stroke_dasharray: 6};
+let info = [[args1, 'Hello World'], [args2, 'Testing Longer String']];
+let leg = Legend(info, {pos: [1.5, 1.8], rad: 0.45, vspacing: 0.3});
+let line1 = SymPath({fy: x => 1.5*x*(2-x), xlim: [0, 2], ...args1});
+let line2 = SymPath({fy: x => x*(2-x), xlim: [0, 2], ...args2});
+let plot = Plot([line1, line2, leg], {aspect: phi, ylim: [0, 2]});
+return Frame(plot, {margin: 0.2});

docs/examples/malthus.js

@@ -0,0 +1,19 @@
+// Draw a plot of a function increases from below zero to a maximum value of nbar. Indicate with vertical and horizontal lines where this line cross zero and a positive threshhold g_z / alpha. Label these intersection points on the axis, along with nbar and zero. Let the x-axis label be "Standard of Living (y)", the y-axis label be "Population Growth (gL)", and the title be "Modified Demographic Function".
+let nbar = 2; let ybar = 1; let theta = 1; let gz = 0.5; let alpha = 0.5;
+let gza = gz/alpha; let ystar = ybar + gza/theta;
+let xlim = [xlo, xhi] = [0, 5]; let ylim = [ylo, yhi] = [-2, 3];
+let demo = y => min(nbar, theta*(y-ybar));
+let path = SymPath({fy: demo, xlim});
+let zero1 = HLine(0, {lim: xlim, opacity: 0.2});
+let zero2 = VLine(ybar, {lim: ylim, opacity: 0.2});
+let line1 = HLine(gza, {lim: xlim, stroke_dasharray: 3});
+let line2 = VLine(ystar, {lim: ylim, stroke_dasharray: 3});
+let dot = Points([[ystar, gza]], {size: 0.04});
+let xticks = [[1, Tex('\\bar{y}')], [ystar, Tex('y^{\\ast}')], [xhi, '']];
+let yticks = [[0, '0'], [gz/alpha, Tex('\\frac{g_z}{\\alpha}')], [nbar, Tex('\\bar{n}')], [yhi, '']];
+let plot = Plot([path, zero1, zero2, line1, line2, dot], {
+  aspect: phi, xlim, ylim, xticks, yticks, xlabel: 'Standard of living (y)',
+  ylabel: 'Population growth (gL)', title: 'Modified Demographic Function'
+});
+let frame = Frame(plot, {margin: 0.25});
+return frame;

docs/examples/mushroom_planet.js

@@ -0,0 +1,4 @@
+// Two side-by-side rectangles, the left one being square and containing a mushroom emoji, the right one containing the world "planet".
+let boxes = ['🍄', 'planet'].map(x => Node(x, {padding: 0.15}));
+let stack = HStack(boxes);
+return Frame(stack, {padding: 0.05});

docs/examples/placement.js

@@ -0,0 +1,5 @@
+// A square in the top left and a circle in the bottom right.
+return Group([
+  [Square(), {pos: [0.3, 0.3], rad: 0.15}],
+  [Circle(), {pos: [0.7, 0.7], rad: 0.15}]
+]);

docs/examples/point_diagram.js

@@ -0,0 +1,33 @@
+// Two horizontal lines connected at the left with a vertical line. The top line contains mostly blue circles and one red circle. The bottom line contains mostly red circles that are spaced more widely. There is a thin box on the top line labeled "Low B" and a wider box on the bottom line labeled "High B". At the bottom of the figure there is the text "Productivity >>>".
+
+// line and point positions
+let [B1, B2] = [0.05, 0.2];
+let [size, bsize] = [0.02, 0.1];
+let [y1, y2] = [0.3, 0.7];
+let [b1, b2] = [0.44, 0.65];
+let p1 = [0.08, 0.17, b1, 0.52, 0.59];
+let p2 = [0.2, 0.4, b2, 0.95];
+
+// line structure
+let base = VLine(0);
+let prods = [y1, y2].map(y => HLine(y, {stroke: 'black'}));
+
+// points on lines
+let steps1 = Points(p1.map(x => [x, y1]), {shape: Circle({fill: blue}), size});
+let steps1a = Points([[0.36, y1]], {shape: Circle({fill: red}), size: 0.02});
+let steps2 = Points(p2.map(x => [x, y2]), {shape: Circle({fill: red}), size});
+
+// gray rectangles
+let pat1 = Rect({rect: [b1, y1-bsize, b1+B1, y1+bsize], fill: '#DDD', opacity: 0.75});
+let pat2 = Rect({rect: [b2, y2-bsize, b2+B2, y2+bsize], fill: '#DDD', opacity: 0.75});
+
+// labels
+let label1 = Note('"Low B"', {pos: [0.47, y1-0.15], rad: 0.06});
+let label2 = Note('"High B"', {pos: [0.753, y2-0.15], rad: 0.06});
+let xlabel = Note('Productivity >>>', {pos: [0.5, 1], rad: 0.1});
+
+// group together and frame
+let group = Group([
+  base, ...prods, pat1, pat2, steps1, steps2, steps1a, label1, label2, xlabel
+], {aspect: 1.3});
+return Frame(group, {margin: 0.1});

docs/examples/rotate.js

@@ -0,0 +1,2 @@
+// A rectangle with aspect ratio 2 placed in the top right and rotated 20 degrees clockwise.
+return Place(Rect(), {pos: [0.65, 0.3], rad: [0.2, 0.1], rotate: 20});

docs/examples/shaded_plot.js

@@ -0,0 +1,22 @@
+// A plot of two lines that are shaded below. One line is a steep exponential in blue and the other line is a more shallow exponential in red. The x-axis has tick labels at "1" and "B" and the "B" tick has associated solid vertical line. The y-axis has a tick at "0". The x-axis has the lable "Innovation Step Size" and the y-axis "Density".
+
+// define parameters
+let [αi, αr] = [8, 2]; let B = 1.3;
+let xlim = [xlo, xhi] = [1, 2]; let ylim = [ylo, yhi] = [0, sqrt(αi)];
+let [fi, fr] = [αi, αr].map(α => (x => sqrt(α)*x**(-α-1)));
+
+// make shaded areas and lines
+let si = SymFill({fy1: 0, fy2: fi, xlim, fill: blue, opacity: 0.4});
+let sr = SymFill({fy1: 0, fy2: fr, xlim, fill: red, opacity: 0.4});
+let [bi, br] = [fi, fr].map(f => SymPath({fy: f, xlim, stroke: '#333'}));
+let bline = VLine(B, {lim: ylim, stroke_width: 2});
+
+// plot it and frame it
+let plot = Plot([si, sr, bi, br, bline], {
+  aspect: phi, grid: true,
+  xticks: [[1, '1'], [B, 'B'], [2, '']],
+  yticks: [[0, '0'], [sqrt(αi), '']],
+  xlabel: 'Innovation Size', ylabel: 'Density',
+  xlabel_offset: 0.13, ylabel_offset: 0.05
+});
+return Frame(plot, {margin: 0.2});

docs/examples/sine_wave.js

@@ -0,0 +1,9 @@
+// A plot of a sin function from 0 to 2\*pi. The y-axis has ticks from -1 to 1. The x-axis has ticks from 0 to 2\*pi labeled as fractions of pi and is anchored at y\=0. There are light gray dashed grid lines aligned with the ticks.
+let line = SymPath({fy: x => -sin(x), xlim: [0, 2*pi]});
+let xticks = linspace(0, 2, 6).slice(1).map(x => [x*pi, `${rounder(x, 1)} π`]);
+let plot = Plot(line, {
+  aspect: phi, xaxis_pos: 0, xticks, yticks: 5, grid: true,
+  xlabel: 'phase', ylabel: 'amplitude', title: 'Inverted Sine Wave',
+  xlabel_offset: 0.1, xaxis_tick_pos: 'both', grid_stroke_dasharray: 3
+});
+return Frame(plot, {margin: 0.25});

docs/examples/stack_boxes.js

@@ -0,0 +1,4 @@
+// Two side-by-side rectangles, the left one being square and containing a mushroom emoji, the right one containing the world "planet".
+let boxes = ['🍄', 'planet'].map(x => Node(x, {padding: 0.15}));
+let stack = HStack(boxes);
+return Frame(stack, {padding: 0.05});

docs/examples/starburst.js

@@ -0,0 +1,7 @@
+// A square grid of four cells, where each cell contains a starburst pattern with 12 lines radiating outwards from a central point.
+let n = 12;
+let shape = [2, 2];
+let size = prod(shape);
+let star = Group(range(-90, 90, 180/n).map(Ray));
+let grid = Grid(reshape(repeat(star, size), shape));
+return Frame(grid, {border: 1, margin: 0.05});

docs/examples/whale.js

@@ -0,0 +1,2 @@
+// A whale emoji in a square box.
+return Node('🐋', {margin: 0.1});

docs/examples/word_counts.js

@@ -0,0 +1,22 @@
+// A horizontal grid of boxes, each containing an integer. On top of each box is a label indicating which word it is associated with, such as "quick" or "fox". Near the end of the grid, there is an ellipsis box indicating there are many omitted words inbetween.
+
+// define cell data
+let data = [
+  ['the', '2'], ['quick', '1'], ['brown', '2'], ['fox', '1'],
+  ['jumped', '1'], ['over', '1'], ['dog', '1'], ['lazy', '0'],
+  ['plum', '0'], ['house', '0']
+];
+
+// make stacked cell array
+let cells = data.map(([w, c]) => VStack([
+  Node(w, {aspect: 1, border: 0, padding: [0, 0.8]}),
+  Node(c, {padding: 0.4, aspect: 1})
+]));
+
+// splice in ellipsis
+let dots = HStack(repeat(Dot(), 3), {spacing: 1});
+let elps = Frame(dots, {aspect: 1, padding: 1.5});
+cells.splice(8, 0, VStack([1/2, elps]));
+
+// returned cells with margin
+return Frame(HStack(cells), {margin: 0.05});