Embedding an app

Every interactive app on this site can be dropped into another web page – lecture notes, a course site, a blog post – as an <iframe>. Add embed=1 to the app’s URL and the page renders the app alone – its controls and its chart, with none of the page’s explanation, none of the diagnostic plots and tables under the chart, and no navigation bar, sidebar, title or footer.

The fastest way to get there: every app has a Share button above its controls. It writes the snippet below for you, with a checkbox for whether to carry the inputs you currently have set up and a field for the frame height. It also lists a plain link to the app, with and without your current inputs – click one to copy it – for when you’d rather link to it than embed it.

<iframe
  src="https://www.visualmathlab.com/apps/newton-method/?embed=1&f=x^3-2&x0=1"
  width="100%" height="900" loading="lazy"
  title="Newton's method">
</iframe>

Choosing what the app opens with

Every input on an app page is mirrored in its URL, so the parameters you see in the address bar after setting up an app are the parameters to put in the src. Set the function, endpoints, step counts and options the way you want readers to first see them, then open Share and tick Keep the current inputs – no need to copy the address bar or append &embed=1 by hand. Readers can still change everything once the app has loaded; the URL only sets the starting point.

Pages with more than one app

A few pages hold several interactive figures, one per step of an argument. embed=1 gives the first; to frame a later one, name it instead of 1. Each figure has its own Share button right above it, so the snippet it writes already names the right one. Sperner’s Lemma – Combinatorial Proof has three: embed=triangulation (the colored triangulation at the top, the same as embed=1), embed=doors (the three kinds of room) and embed=boundary (the bottom edge on its own). A name no figure on the page carries falls back to the first.

<iframe
  src="https://www.visualmathlab.com/apps/sperners-lemma-combinatorial-proof/?embed=boundary"
  width="100%" height="480" loading="lazy"
  title="Sperner's lemma on the bottom edge">
</iframe>

Size

The controls keep their natural height and the chart takes whatever the frame has left, so the frame’s height decides how big the chart is and nothing inside it scrolls. 900 pixels gives every app a chart of at least about 400 pixels; 720 still fits most, but the apps with the longest controls panels are then down to the 300-pixel floor the chart holds at, below which the frame scrolls instead. width="100%" lets the frame follow your column. Below about 600 pixels of width the controls stack vertically and the floating legend is hidden, as it is on a phone; that works but is cramped, so on a narrow layout consider linking to the app instead. The Share dialog’s height field starts at one of these numbers – 900 for a Plotly chart, the figure’s own drawn height for anything else – and you can change it there instead of editing the snippet by hand.

Privacy

An embedded app sets no cookies, shows no analytics banner, and records nothing: analytics never run in embed mode, even for a visitor who allowed them on a direct visit to this site. Everything else in the privacy policy applies – in particular, the app still loads Plotly and math.js from their public CDNs.

Building your own

The chart theming, control panels, sliders and numerical helpers these apps are built from are a separate open-source library, mathviz, packaged as a Quarto extension (quarto add apurvanakade/mathviz) and as a plain script bundle for any other site. If you would rather write an app of your own in the same style than embed one of these, start there.

Attribution

The apps are released under the Apache 2.0 license. A link back to the app’s page on this site is appreciated but not required.