BME Visualizations
Interactive, parameter-driven models for five biomedical engineering courses — the governing equation and a live plot on the same page.
Active developmentLive on GitHub Pages- Division
- Engineering
- Role
- Independent build
- Timeline
- 2025 – present
Course models usually arrive as one plot at one parameter set. These dashboards let you sweep the parameters — vessel diameter, gain, moment arm — and see the consequence immediately.
- HTML
- JavaScript
- Chart.js
- Python · NumPy · Matplotlib
- GitHub Pages
01Problem / user need
A student usually sees a governing equation’s behaviour at one parameter set: a slide with a fixed plot, or a notebook that runs once. That doesn’t teach the shape of the relationship. Understanding the Fåhræus–Lindqvist effect means knowing that apparent blood viscosity has a minimum at a particular vessel diameter — which a single curve doesn’t show, and sweeping the diameter does.
02Requirements
| # | Requirement | Acceptance criterion | Status |
|---|---|---|---|
| R1 | Numerical correctness | Each model matches its closed-form solution across the slider range | Not yet tested |
| R2 | Physical plausibility | Each model reproduces a published reference value or limiting behaviour | Not yet tested |
| R3 | Units | Units stated on every axis and slider; equations dimensionally checked | In progress |
| R4 | Parity | Browser and Python implementations agree where both exist | Not yet tested |
| R5 | Zero-install | Every dashboard opens from GitHub Pages or a local file with no build step | Met |
03Architecture
┌───────────────────────────────────────────────────────┐
│ GitHub Pages — catalog homepage (launch surface) │
└───┬────────┬────────┬────────┬────────┬───────────────┘
│ │ │ │ │ one folder per course
┌───▼───┐┌───▼───┐┌───▼───┐┌───▼───┐┌───▼───┐
│ bio- ││ bio- ││ instr.││ signal││ bio- │ each: self-contained
│ mat. ││ fluids││ arch. ││ models││ mech. │ HTML + Chart.js
└───────┘└───────┘└───────┘└───┬───┘└───────┘ + README + notes
│
┌─────────▼─────────┐
│ Python / NumPy / │ reproducible figures;
│ Matplotlib │ second implementation
└───────────────────┘04Design decisions
Self-contained HTML per model instead of one app
- Chosen
- One standalone dashboard per model, with no build step.
- Alternative
- A unified React/Next.js app with shared components.
- Tradeoff
- A model still opens in four years on any machine, with no dependency install that has since broken — for coursework meant to outlive a semester, that durability is the feature. Cost: duplicated plotting boilerplate and no cross-model linking.
Chart.js
- Chosen
- Chart.js for plotting.
- Alternative
- D3 or Plotly.
- Tradeoff
- Small API, quick to wire a slider to a redraw. Cost: scientific conventions — log axes, annotated asymptotes, dual y-axes — are awkward.
A second Python implementation for the signal models
- Chosen
- NumPy/Matplotlib alongside the browser dashboard.
- Tradeoff
- Gives reproducible static figures and an independent implementation to check the dashboard against. Cost: two implementations to keep in sync, and drift is silent unless parity is tested.
4.5Scope & role
Built and maintained by me.
PendingNot yet documented: which models were graded course deliverables, and my share of the group-built sleep apnea / CPAP simulation.
05Implementation
| Course | Model content |
|---|---|
| Bioperformance of Materials | 2×2×2 experimental flow; attachment, morphology, and degradation models; framing for a graphene-oxide fibroblast-recovery project |
| Biofluid Mechanics (BME 3261C) | Newtonian plasma vs. shear-thinning whole blood, including Fåhræus–Lindqvist; standing arterial hydrostatics; Jurin’s law capillary rise; an arterial-stenosis flow model; and an obstructive sleep apnea / CPAP expiratory-relief simulation built for a group design challenge (Group 10, “Rethinking CPAP”) |
| Medical Instrument Architecture | Signal chain from measurand to display; isolation as a patient-safety requirement; cascaded LTI transfer function |
| Biomedical Signal Models | Skin–electrode loading; thermistor vs. strain-gauge linearity; instrumentation-amplifier CMRR; Johnson noise; a filter bank (high-pass, low-pass, band-pass, notch) |
| Biomechanics | Sagittal-plane knee model: external load torque vs. the patellar-tendon force needed for static equilibrium, with moment-arm sliders |
06Verification
PendingNot yet validated. Every model here has an independent check available, and none needs users or hardware: closed forms (Jurin’s law, ρgh, √(4kTRB) ≈ 4 nV/√Hz for 1 kΩ at 300 K, ΣM = 0 at the knee), published behaviour (the Fåhræus–Lindqvist viscosity minimum at small diameters), and browser-vs-Python parity. Results will go in a validation table in the repo. Until then, no accuracy claim is made.
Why this matters most here: a dashboard with a wrong constant or a units error still draws a smooth, plausible curve. Nothing looks broken. Checking against closed-form solutions is the only defence.
07Failures / iterations
PendingNot yet documented: models that drew a plausible curve but were wrong until checked, unit conversions (mmHg ↔ Pa, µm ↔ m, dB ↔ ratio), and slider ranges that reached physically meaningless values.
08Limitations
- Teaching and exploration tools — not validated simulation software, and not for clinical or design use.
- Simplified assumptions throughout: a rigid-body static knee, lumped linear instrument stages, and idealised fluids outside the regimes where the correlations hold.
- References to ISO 10993 and IEC 60601 are illustrative framing, not compliance guidance.
- Sliders may permit values outside a model’s valid range.
- Single author; no instructor or peer review.
09Repository / demo / report
- Live appjonnyterrero.github.io/BME-Visualizations/
- Repositorygithub.com/jonnyterrero/BME-Visualizations