1. Principles of Scientific Visualization

Demonstrating why summary statistics mask raw dynamics, and how inaccurate colormaps warp visual analysis.

Plot Comparative Analysis

Anscombe's Quartet contains 4 datasets with identical statistical properties (mean x = 9, mean y = 7.50, variance, and correlation), yet vastly different structures. Click modes to inspect how they reveal themselves.

Perceptual Color Space Impact

Standard 'Jet' (rainbow) palettes introduce visual discontinuities and false contours due to non-uniform luminance steps. Uniform maps represent gradients with true, physical fidelity.

2. EEG: Brain Rhythms & Frequency Oscillations

Visualizing the spatial distribution and frequency spectrogram of neural field potentials across the human scalp.

Topographic Spatial Scalp Map

Estimated cortical field potential map using 19 standard electrodes. Select neural bands below to see spatial shifts (Alpha is posterior, Beta is frontal, Delta is global slow waves).

Spectral Power Waterfall (TFR)

Time-Frequency spectrogram scrolling in real-time. Notice the localized power density peak corresponding to the selected frequency band.

Select Active Neural Rhythm:

3. ECG & PPG: Hemodynamic Coupling & HRV

Measuring cardiovascular system state from electrical triggers (ECG) to mechanical pulse waves (PPG).

Cardiovascular Multi-Channel Oscilloscope

Simulated Lead II ECG (top) and corresponding peripheral PPG (bottom). Notice the Pulse Transit Time (PTT) delay between electrical ventricular depolarization and physical vascular absorption peak.

Highlight ECG Waveform Phase:

HRV Poincaré Attractor Map

Plotting beat-to-beat variability (Interval N vs Interval N+1). Healthy states show structured elliptical scatter (high HRV). Pathology restricts variability into a compact, rigid cluster (low HRV).

Cardiovascular Autonomic Profile:

4. EMG: Neuromuscular Mechanics & Rate Coding

Decoding motor command structure from clinical macro gait patterns down to micro-level single motor unit recruitment.

Myoelectric Gait Cycle Activation

Linear envelope representing activation profiles of Tibialis Anterior (TA) and Gastrocnemius (GM) over a complete stance-to-swing cycle.

Locomotive Gait Profile:

Motor Unit Action Potential Raster

Decomposed action potential discharge spikes across distinct motor units. Notice the Henneman Size Principle: as force scales, additional motor units recruit sequentially.

5. High-Impact Micro-Imaging Artistry

Highlighting structural biology, neural tractography, and cellular pathologies via modern microscopic imaging.

🔬

Fruit Fly Nervous System

Confocal Microscopy
❤️

Cardiac Lymphatic Network

Light-Sheet Microscopy
🧪

Subcellular Cholesterol

Scanning Electron (SEM)
🧠

Brain Tractography Streamlines

Diffusion Tensor Imaging
🍃

Deep-Tissue Microplastics

Photoacoustic Imaging
🎨

Self Reflected Connectome

Micro-Etching Artistry

Overview: Principles of Biosignals

Biomedical signal processing forms the analytical foundation of diagnostic medicine and neuroscience. Biosignals represent time-varying physiological parameters generated by cellular metabolic, chemical, or electric phenomena. These processes span multiple physiological systems, from the microscopic action potentials generated by cortical synapses (measured via Electroencephalography) to macroscopic mechanical hemodynamics (measured optically via Photoplethysmography).

To accurately capture and evaluate these dynamic physiological properties, visual interfaces must adhere strictly to information design principles. As shown by Anscombe’s Quartet, basic statistical metrics like means, variances, and correlations fail to capture structural features in raw data. Perceptually uniform color mapping plays an equally critical role: non-linear color transitions, such as those present in classic rainbow color schemes, introduce artificial boundaries that can lead to incorrect diagnoses or misinterpretation of clinical data.

How to Use the Visualizers

This single-page application is structured as an interactive educational dashboard divided into five focus modules. Users can navigate sequentially by scrolling or using the desktop sidebar. To begin, use the following interactive steps:

1. Principles of Visualization: Toggle between Bar, Scatter, and Box modes on the left panel to observe how Anscombe's quartet is represented. On the right panel, switch between the Viridis, Jet, and Cividis color spaces to understand how uniform luminance improves diagnostic clarity.

2. EEG Oscillations: Click the Delta, Theta, Alpha, or Beta buttons in the rhythm selector. Observe the topographic scalp map to track shifting spatial densities across frontal and posterior cortical channels. Check the scrolling spectrogram to see live changes in frequency power peaks.

3. ECG & PPG Dynamics: Click on the ECG annotation buttons to isolate the P wave, QRS complex, or T wave, which are highlighted along the trace with descriptions of their underlying electrical activity. Toggle between Healthy and Heart Failure on the HRV Poincaré plot to inspect autonomic vagal response shifts.

4. EMG and Neuromuscular Control: Switch between Normal and Pathological gait states to examine temporal shift changes in muscle envelopes during locomotion. Adjust the Central Motor Drive slider from 10% to 100% to view changes in motor unit recruitment patterns (raster density) and hear the modulated acoustic frequency.

5. Bio-Imaging: Click on any microscope card in the gallery to open a detailed modal overlay containing high-resolution references, acquisition technology breakdowns, and attribution credits.

Technical Details & Implementation Notes

This application is authored in vanilla HTML, native CSS layouts, and modern standard JavaScript, without external design frameworks. Visualizers are drawn directly on HTML5 Canvas elements with standard mathematical render pipelines running inside a 60 FPS requestAnimationFrame loop. This design helps minimize performance overhead, supports responsive scaling, and maintains a clean Interaction to Next Paint (INP) response profile of under 30ms.

Sound Synthesis Architecture: Interactive audio feedback utilizes the Web Audio API. By default, the Web Audio Context is suspended until a user action occurs (e.g. clicking "Sound: OFF" to toggle audio). ECG heartbeats are synthesized using a dual-pulse low-frequency oscillator, producing distinct "lub-dub" peaks synchronized with the R-wave and T-wave of the simulation. EMG motor command noise is synthesized by combining a triangle oscillator with a high-rate frequency modulator (LFO), creating an acoustic rumble that scales in frequency and amplitude according to the force slider.

Future Directions

The roadmap for this educational biosignal suite includes several prospective feature updates: integrating WebGL and three.js to support real-time 3D volume rendering of cortical tractography, importing standard clinical data formats (such as European Data Format .edf or PhysioNet .dat) through file drag-and-drop parsers, and incorporating browser-based deep learning models (such as TensorFlow.js) to show real-time classification of cardiac arrhythmias and motor unit decomposition directly on the live streams.

Related Biosignal Systems & Resources