Interactive learning using Observable javascript

Mattias Villani

Outline of the talk

• Tour of some interactive notebooks for Statistics that I have done for courses and research.
  
  
• How you can use and modify them for your needs.
  
  
• A little peek under the hood on how they were done with Javascript.

Observable Notebooks

• Like Quarto/Jupyter: document with

  • text (markdown and html)

  • math (LaTeX)

  • code

  • graphs

  • tables

• Interactive with sliders, checkboxes etc.

• Reactive: change one cell and the cells that depends on the cell changes (DAG-based)

• Free (version) and wonderful infrastructure for hosting of notebooks on https://observablehq.com/

Nearly 50 Statistical distributions

List of notebooks with statistical distributions

Interval estimates

• Confidence interval for a proportion

• Frequentist coverage of intervals: Wald vs Wilson

• Confidence interval for a mean

• Bayesian credible intervals

• Frequentist coverage of intervals: Wald vs Wilson vs Bayes

The likelihood function and the MLE

• Bernoulli

• Poisson

• Poisson regression

Hypothesis testing

• Hypothesis testing for the mean in a normal population

• Type I and II errors

• Bayesian hypothesis testing for the mean in a normal population

Basic mathematics

• The Derivative

• The Riemann integral

• Second derivative measures curvature of a function

Probability

• Approximating the binomial distribution

• Law of large numbers

• Central limit theorem

• Tails of a distribution (largest order statistic)

• Mixture of normals distribution

• Distributions on the unit simplex

• Kullback-Leibler divergence between distributions

And of course lots of Bayes

• Bayesian inference list with 35+ notebooks

• Bayesian updating for the iid Normal model

• Bayesian linear regression

Time series analysis

• Simulation and ACF of an AR process

• Spectral density and ACF of seasonal ARMA

• Kalman filtering for Nile river data

• Poisson time series model for counts

• Stochastic volatility model

Research

• Identification of mean/intercept in AR(1) process

• Time-varying spectral density for US industrial production

Embed in Quarto/HTML presentations

• Clickable link at the bottom: credit to the author.
• Example lecture based on Quarto + Interactivity:

Download static images

Embed widgets as iFrame

Embed directly in Athena

Fork the notebook to adapt it

The three components of a web page

HTML	CSS	Javascript
What to show (text)	How to show it (design)	What to do (interactivity)

• Javascript is the language of the web:

  • Runs in all major browsers without install

  • Just-in-time compiled. Pretty quick!

• Javascript cheat sheet

• Toy example

D3 - javascript library for visualization

• D3

• Full control, but much more low-level than Observable notebooks.

• D3 Examples

Observable notebooks

• Builds on the Plot library by the creator of D3.

• Javascript (almost)

  • Note: javascript uses zero-based indexing

  • The Plot library is based on the grammar of graphics (ggplot2 in R): 90% of time is setting up the right dataset.

  • Fundamental data structure is vector of objects (dictionaries).

Data object in Observable

Observable framework

• Observable Framework: dashboards instead of notebooks

• Examples: US electricity grid | interest rates

• Example (embryo): Bayesian Learning dashboard

• Different use case: better placement of multiple elements (graphs, sliders etc) on screen.

• Data loaders from any language, e.g. R, Python, Julia.

  • Data loaders are executed at build time.

  • Any interactivity in real time still handled by javascript.

• It is just code (not a notebook) = VS code + Git workflow.