Punnett Square Simulator: Modeling Mendelian Inheritance and Hardy-Weinberg Equilibrium in JavaScript

Visualizing genetic allele distributions beyond simple single-gene traits can quickly become tedious when computing multi-gene combinatorial trees and phenotype ratios.

To make genetics intuitive and interactive, I built a pure JavaScript inheritance simulator that models both cross variations and population dynamics.

How It Works

• Cartesian Combinatorics: The engine takes parental genotypes, determines all possible gamete configurations, and builds the full Cartesian product matrix (monohybrid $2 \times 2$, dihybrid $4 \times 4$).
• Dominance Mapping: Evaluates complete, incomplete, and codominance allele interactions to output precise genotype and phenotype probability breakdowns.
• Hardy-Weinberg Verification: Runs chi-square goodness-of-fit testing against population genetics distributions ($p^2 + 2pq + q^2 = 1$) to verify theoretical equilibrium states.

Test out the simulator: Punnett Square Simulator

What algorithmic models have you used to visualize biological simulations on the web? Discuss below!