Scientific Visualization
These animated/interactive visualizations were built mostly to accompany my presentations, but also for documentation and course websites.
They are self-contained, reusable Vue web components built with D3.js and Three.js. Download source archive (components, composables, scripts).
Table of Contents
Gradient Ascent on Density
Gradient ascent trajectories climb the log-probability landscape from random starting points. Each purple trace follows the gradient until convergence, showing where the density concentrates. Stars mark converged maxima, demonstrating the multimodal structure of the target distribution, and that gradient ascent is absolutely not posterior sampling. Caveat: there is an unfortunate saddle point in the edges.
Random Walk Metropolis-Hastings
A basic random-walk Metropolis-Hastings sampler proposes isotropic Gaussian steps. Green arrows indicate accepted proposals; red arrows indicate rejections. Orange dots form the sampling trail from the start position (★). Notice how the sampler struggles with the narrow manifold — many proposals are rejected because they fall off the high-density region. The Lissajous curve is necessary to highlight this phenomena which, formally, occurs in high dimensions, but can be at least handwavily visualized in 2D with a complicated manifold.
Hamiltonian Monte Carlo Trajectories
HMC introduces auxiliary momentum variables and simulates Hamiltonian dynamics to propose distant moves that follow the density contours. Each trajectory is a sequence of leapfrog integration step animated in real time. Green = accepted, red = rejected. The sampler efficiently explores the entire manifold compared to random-walk methods.
Mass Matrix in HMC
The mass matrix M in HMC acts as a static metric (contrast: Riemannian metric which depends on position), stretching and rotating the momentum to match the geometry of the target density. We showcase different posterior geometry to highligh why one might want to use a mass matrix to isotropize the posterior, thus allowing larger. integration step size. But also the limitation of a fixed mass matrix (Neal's funnel).
Isotropic posterior geometry
Anisotropic posterior geometry
Neal's funnel
Concentration of Measure
In high dimensions, probability mass concentrates near a thin shell (the typical set), not at the mode. This Three.js visualization shows three stacked rotating cubes: (top) uniform distribution throughout the volume, (middle) a Gaussian concentrated near a spherical shell, (bottom) a manifold-constrained distribution illustrating how MCMC targets can concentrate (grossly exagerated effect in the two latter case).
3D HMC Flow
A Three.js 3D rendering of HMC dynamics. The bottom cube shows the potential energy surface and a density countour on the floor plane. The top cube shows the total energy (potential + kinetic). The blue segment is potential energy, the orange segment is kinetic energy, and the trajectory animates across both cubes. The semi-transparent orange plane in the top cube visualizes energy conservation.