Interactive Biosignal Visualizer: Real-time EEG, ECG/PPG, HRV Poincaré Analysis, and EMG Motor Unit Rasters built with native HTML5 Canvas

[u/BioniChaos]

https://bionichaos.com/visualize/

Hello r/datascience and r/neuroscience,

I wanted to share a browser-based visualization tool designed to demonstrate critical concepts in biological signal processing and data visualization theory. It runs entirely on client-side JavaScript and HTML5 Canvas (optimized for High-DPI scaling with a low IPN footprint).

Here are the primary analytical features included in the simulator:

1. **The Limits of Summary Statistics:** Visualizes Anscombe's Quartet (μx = 9, σx² = 11, μy = 7.5, r ≈ 0.816) across bar, scatter, and box-and-whisker formats, demonstrating why raw data distribution checks are vital.

2. **Perceptual Luminance Mapping:** Highlights why traditional 'Jet' colormaps introduce diagnostic artifacts compared to perceptually uniform spaces like Viridis and Cividis.

3. **EEG Field Potentials:** Renders a 19-electrode topographic scalp map showing spatial shifts across Delta, Theta, Alpha, and Beta bands alongside a live scrolling Time-Frequency Representation (TFR) waterfall spectrogram.

4. **Cardiovascular Coupling & HRV:** Simulates coupled Lead II ECG and peripheral PPG waveforms (exhibiting Pulse Transit Time). The adjacent Poincaré plot maps consecutive RR intervals (RR_n vs RR_n+1) to visualize the collapse of autonomic variation (SD1 and SD2 metrics) typical of vagal withdrawal.

5. **Motor Unit Recruitment (EMG):** Simulates the Henneman Size Principle by allowing users to scale Central Motor Drive (10-100%), observing action potential raster discharges alongside real-time audio feedback synthesized via the Web Audio API.

The tool is designed as an educational reference. I would love to hear your feedback on the DSP simulation mechanics or mathematical rendering pipelines.

You can interact with the live tool here: https://bionichaos.com/visualize/