Visual Math Lab

www.visualmathlab.com — interactive, browser-based visualizations of numerical methods, probability, and a little discrete math. A Quarto website; every app is a single .qmd page whose logic lives in Observable JS cells, drawn with Plotly and Observable Plot.

Run it locally

git clone https://github.com/apurvanakade/VisualMathLab && cd VisualMathLab
quarto preview           # http://localhost:4200

The first preview renders the whole site once (about a minute); after that only the page you open or the file you save is re-rendered. That is all a content change needs. npm install (once) adds the dev-only tooling: npm test for the site's structural tests and npm run verify for a headless-browser pass over every rendered page.

Add an app

1. cp -r apps/_template apps/<slug> and work through the TODOs — the template is a working fixed-point-iteration page with every cell the site expects (result, setup, mainPlot, the URL-synced inputs, the example dropdown, the step slider, the convergence plots, the table), so it renders before you change a line. Keep the <div class="vm-app"> wrapper around the controls panel and the chart: it marks what ?embed=1 shows on its own.
2. Set its topic: (a topic page's exact title:) and order:. Those place it in its topic's listing, the sidebar and the homepage; there is no list to add it to.
3. quarto preview, open the page, and iterate.

CLAUDE.md is the long-form guide to the page conventions; CONTRIBUTING.md covers licensing and file headers.

Embed an app elsewhere

Any app can be framed into another site with ?embed=1 on its URL, which shows the app alone — its controls and chart, none of the page's text. A page with several figures takes ?embed=<id> to pick one. See Embedding an app.

Where the shared code lives

The chart theming, control-panel styling, slider playback, floating legend and numerical helpers every page uses are a separate library, mathviz, packaged as a Quarto extension and vendored here under _extensions/. This repository is the content: the app pages, the topic listings, the theme and the site chrome. To change something every page shares, change it there.

References

• https://stackoverflow.com/questions/69033403/how-to-refresh-sliderinput-in-shiny-in-real-time-not-only-when-the-sliding-en
• https://vanderbei.princeton.edu/JAVA/pivot/simple.html
• https://visualpde.com/explore.html