🎨 Visual Lab: Interactive Biological Diagrams

Biology is inherently visual and mechanical. The Visual Lab allows students to manipulate physiological parameters, trace biochemical pathways, and observe molecular machines in real time.

---

1. 🧬 DNA Replication Fork Dynamics

Multi-Mode DiagramMolecular Genetics: DNA Replication Fork & Polymerase Kinetics

Option 1: Publication-Grade Scientific Vector SVG

Replication fork schematic showing Leading strand continuous synthesis (5'->3') and Lagging strand discontinuous Okazaki fragments with Helicase, SSB, Primase, and Ligase.

Replication Velocity: $v_{\text{repl}} \approx 2000\,\text{bp/sec in } E. \text{ coli}$

PCR Amplification: $N = N_0 \times 2^n$

Option 2: Interactive 60 FPS Canvas Physics Engine

Simulate DNA unwinding speed and Okazaki fragment ligation kinetics.

Fork Rate (bp/s): 2000 bp/s

Elongation Rate ($v$):2000 bp/s

Error Rate ($\epsilon$):1 in 10^9 bp

Option 3: Interactive 3D Spatial Viewport

3D Double Helix molecular geometry.

+X

+Y

+Z

👆 Click and drag anywhere to rotate in 3D space

Azimuth Angle (ψ):35°

Elevation Angle (θ):-22°

B-DNA Dimensions:$\text{Pitch} = 3.4\,\text{nm} \quad (10\,\text{bp/turn})$

Option 5: Reactive Parametric Physics with Live Calculus

PCR Thermal Cycle & Amplicon Copy Number Calculator.

PCR Cycles (n): 30

: 45

Amplified DNA Copies ($2^n$):$1,073,741,824x$

Active Mode:Option 1 (Print & Derivation Vector SVG)Switch modes using the tabs above to explore different visualizations.

---

2. 🫀 Cardiac Cycle & Electrocardiogram (ECG) Waves

Multi-Mode DiagramCardiovascular Electrophysiology: ECG Waves & Wiggers Cycle

Option 1: Publication-Grade Scientific Vector SVG

Standard Lead II Electrocardiogram showing P-wave (Atrial Depolarization), QRS Complex (Ventricular Depolarization), and T-wave (Ventricular Repolarization).

Cardiac Output: $CO = \text{HR} \times \text{SV} = 72\,\text{bpm} \times 70\,\text{mL} \approx 5040\,\text{mL/min}$

Ejection Fraction: $\text{EF} = \frac{\text{SV}}{\text{EDV}} \times 100 \approx 55-70\%$

Option 2: Interactive 60 FPS Canvas Physics Engine

Adjust Heart Rate to observe real-time cardiac output and stroke volume dynamics.

Heart Rate (bpm): 72 bpm

Heart Rate ($\text{HR}$):72 bpm

Cardiac Output ($CO$):5.04 L/min

Option 3: Interactive 3D Spatial Viewport

3D 4-Chambered heart anatomical orientation.

+X

+Y

+Z

👆 Click and drag anywhere to rotate in 3D space

Azimuth Angle (ψ):35°

Elevation Angle (θ):-22°

Stroke Volume Metric:$SV = EDV - ESV = 120 - 50 = 70\,\text{mL}$

Option 5: Reactive Parametric Physics with Live Calculus

Cardiac Output & Blood Pressure Calculator.

Heart Rate (bpm): 72 bpm

: 45

Output (L/min) ($CO$):$5.04 L$

Active Mode:Option 1 (Print & Derivation Vector SVG)Switch modes using the tabs above to explore different visualizations.

---

3. 🏃 Sarcomere Sliding Filament Contraction

Multi-Mode DiagramMuscle Biomechanics: Sarcomere Sliding Filament Mechanism

Option 1: Publication-Grade Scientific Vector SVG

Sarcomere contraction model showing thick Myosin cross-bridges pulling thin Actin filaments toward the central M-line, narrowing the H-zone and I-band.

A-Band Length: $\Delta L_{\text{A-band}} = 0 \quad (\text{Constant during contraction})$

Sarcomere Shortening: $\Delta L_{\text{Sarcomere}} = \Delta L_{\text{I-band}} + \Delta L_{\text{H-zone}}$

Option 2: Interactive 60 FPS Canvas Physics Engine

Simulate Calcium-induced sarcomere shortening.

Contraction (%): 20 %

Contraction State ($\Delta L$):20%

H-Zone Width ($W_H$):50 nm

Option 3: Interactive 3D Spatial Viewport

3D Myosin Head Cross-bridge binding conformation.

+X

+Y

+Z

👆 Click and drag anywhere to rotate in 3D space

Azimuth Angle (ψ):35°

Elevation Angle (θ):-22°

Cross-Bridge Cycle:$\text{Actin} + \text{Myosin-ADP-Pi} \longrightarrow \text{Power Stroke}$

Option 5: Reactive Parametric Physics with Live Calculus

Sarcomere Dimension Calculator.

Shortening (nm): 200 nm

: 45

Sarcomere Length ($L$):$2300 nm$

Active Mode:Option 1 (Print & Derivation Vector SVG)Switch modes using the tabs above to explore different visualizations.

---

4. 💧 Nephron Counter-Current Multiplier

Multi-Mode DiagramRenal Physiology: Nephron Counter-Current Multiplier & Osmolarity Gradient

Option 1: Publication-Grade Scientific Vector SVG

Medullary osmotic gradient (300 to 1200 mOsmol/L) created by Henle loop descending limb water permeability and ascending limb active NaCl transport.

Net Filtration Pressure: $NFP = GHP - (BCOP + CHP) = 60 - (32 + 18) = +10\,\text{mmHg}$

GFR Standard: $GFR = 125\,\text{mL/min} = 180\,\text{L/day}$

Option 2: Interactive 60 FPS Canvas Physics Engine

Trace osmolarity change along the nephron loop.

Depth (mm): 5 mm

Medullary Osmolarity ($Osm$):750 mOsm/L

Option 3: Interactive 3D Spatial Viewport

3D Glomerulus & Bowman Capsule Cup.

+X

+Y

+Z

👆 Click and drag anywhere to rotate in 3D space

Azimuth Angle (ψ):35°

Elevation Angle (θ):-22°

Glomerular Filtration:$GFR = 125\,\text{mL/min}$

Option 5: Reactive Parametric Physics with Live Calculus

Urine Concentration & Filtration Ratio.

GFR (mL/min): 125 mL/min

: 45

Daily Filtrate ($V$):$180 L/day$

Active Mode:Option 1 (Print & Derivation Vector SVG)Switch modes using the tabs above to explore different visualizations.

---

5. ☀️ Photosynthetic Z-Scheme & Calvin Cycle

Multi-Mode DiagramPlant Bioenergetics: Calvin C3 Photosynthetic Cycle & Rubisco

Option 1: Publication-Grade Scientific Vector SVG

Three stages of the Calvin cycle in chloroplast stroma: 1. Carboxylation (Rubisco), 2. Reduction (ATP + NADPH), and 3. Regeneration of RuBP.

Glucose Synthesis Budget: $6 CO_2 + 18\text{ ATP} + 12\text{ NADPH} \longrightarrow 1\text{ Glucose}$

C4 ATP Extra Cost: $\text{Total C4 ATP} = 30\text{ ATP per Glucose}$

Option 2: Interactive 60 FPS Canvas Physics Engine

Calculate ATP and NADPH requirement for glucose carbon fixation.

CO2 Fixed: 6 moles

ATP Consumed ($\text{ATP}$):18 ATP

NADPH Consumed ($\text{NADPH}$):12 NADPH

Option 3: Interactive 3D Spatial Viewport

3D Chloroplast Stroma & Grana Stack.

+X

+Y

+Z

👆 Click and drag anywhere to rotate in 3D space

Azimuth Angle (ψ):35°

Elevation Angle (θ):-22°

C3 Net Equation:$6 CO_2 + 18\text{ ATP} + 12\text{ NADPH} \longrightarrow C_6H_{12}O_6$

Option 5: Reactive Parametric Physics with Live Calculus

Photosynthetic Carbon Budget Tool.

CO2 Fixed: 6

: 45

Glucose (g) ($m$):$180 g$

Active Mode:Option 1 (Print & Derivation Vector SVG)Switch modes using the tabs above to explore different visualizations.