Feel the statistics — don't memorize them.
An interactive teaching site for biostatistics and pharmacokinetics/pharmacodynamics (PK·PD). Every concept is a little machine you can operate: a live formula and a set of sliders and dials on one side, and a hand-built visualization on the other that answers in real time as you steer the controls.
Most stats and PK courses hand you a formula and a static plot. This flips it around: you drag σ and watch the normal curve widen, push a dose and watch the concentration curve lift, turn up fat's partition coefficient and watch the terminal half-life stretch for hours. The intuition comes from operating the model, not reading about it.
Two themed domains, switched with a single toggle:
Data types · Mean/Median/Mode · Spread · Normal distribution · Sampling & the CLT · Confidence intervals · p-values · Power & sample size · Correlation & regression · Diagnostic tests · Risk ratios & NNT · Bayesian updating · Survival & hazard ratios
Half-life & elimination · Volume of distribution · Clearance · Bioavailability · Oral absorption · Flip-flop & lag · Transit compartments · Absorption + distribution · Continuous infusion · Multiple IV dosing · Multiple oral dosing · Two-compartment PK · Population PK · Nonlinear (Michaelis–Menten) elimination · PBPK · Emax & sigmoid · Effect compartment
Each page pairs a KaTeX formula, live stat readouts, and an insight callout with a responsive SVG instrument.
- Vite 6 + React 18 + TypeScript (strict)
- MUI v6 (Material UI, Emotion) with a bespoke m3.material.io-inspired dark theme
- KaTeX for formulas
- d3-scale / d3-array / d3-shape for the visualization math
- framer-motion for motion, react-router-dom v6 for routing
Visualizations are hand-built SVG (no charting library), and the PK curves come from closed-form solutions plus small RK4 integrators in src/lib/pk.ts.
npm install
npm run dev # start the dev server (http://localhost:5174)Then open the URL and pick a concept. Other scripts:
npm run build # type-check + production build
npm run preview # preview the production build locallysrc/
App.tsx # router + per-domain theming shell
theme.ts # design tokens: surfaces, chart palettes, tonal containers
domains.ts # the two domains and their accent colors
pages/ # Landing, ConceptPage
concepts/
registry.ts # single source of truth: tiers + concepts (domain-aware)
*.tsx # biostat concepts
pk/*.tsx # PK·PD concepts
components/
ConceptLayout.tsx # the split-panel shell every concept renders into
controls/ # Pixel/Material-style Slider, Knob, Segmented
viz/ # responsive Chart wrapper + concept visualizations
lib/ # stats, distributions, PK models, Kaplan–Meier
Adding a concept is one component file rendered through ConceptLayout, plus one entry in src/concepts/registry.ts. See CLAUDE.md for the full architecture, design-system, and conventions notes.
A deliberately flat, dark, Material 3-inspired identity: near-black canvas, surface-container "bento" cards, giant Figtree display type, subtle film grain, M3-expressive decorative shapes, and Pixel/Android-style controls. Chart colors are chosen to stay distinguishable for color-vision deficiency on the dark surface.
Built as a learning instrument, not a textbook. Drag things.