A web-based population genetics simulation suite for teaching and research. Runs entirely in the browser — no server, no installation, no data uploaded.
Live: popgenejs.bioinformat.org
PopGeneJS is a complete reimplementation of PopGene.S, a Visual Basic .NET desktop application originally developed for population genetics education. The web version preserves the same models and pedagogical approach while making them accessible from any modern browser on any device.
All simulations run client-side as pure TypeScript functions. Visualizations are rendered with D3.js and respond to theme changes and window resizes in real time.
# Clone the repository
git clone https://github.com/nuin/popgenesjs.git
cd popgenesjs
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:5173.
32 interactive modules across 8 categories:
| Module | Description |
|---|---|
| De Finetti Parabola | Plot genotype frequencies on a ternary diagram against the Hardy-Weinberg equilibrium parabola |
| Genotype Frequencies | Calculate expected genotype frequencies from allele frequencies under HWE |
| Chi-Square HWE Test | Test observed genotype counts against Hardy-Weinberg expectations |
| Module | Description |
|---|---|
| Pure Drift | Wright-Fisher model — binomial sampling of alleles across generations |
| Drift + Selection | Drift with deterministic selection (fitness coefficients wAA, wAa, waa) |
| Drift + Mutation | Drift with forward and reverse mutation pressure |
| Drift + Selection + Mutation | Combined model with all three evolutionary forces |
| Markov Chain Drift | Transition matrix approach showing absorption probabilities |
| Heterozygosity Decline | Track expected heterozygosity loss over generations (H_t = H_0 × (1 - 1/2N)^t) |
| Bottleneck | Population crash and recovery demonstrating genetic diversity loss |
| Founder Effect | Multiple independent colonization events showing variance among founded populations |
| Module | Description |
|---|---|
| Natural Selection | Deterministic allele frequency change under selection with equilibrium lines for overdominance/underdominance |
| Frequency-Dependent | Selection where fitness depends on allele frequency in the population |
| Dominance and Selection | Explore dominance coefficient (h) effects with multi-trajectory comparison |
| Module | Description |
|---|---|
| Two-Way Mutation | Reversible mutation (A↔a) with equilibrium frequency p̂ = ν/(μ+ν) |
| Irreversible Mutation | One-way mutation (A→a) showing exponential decay of the dominant allele |
| Neutral Mutations | Infinite-sites neutral mutation accumulation |
| Muller's Ratchet | Irreversible accumulation of deleterious mutations in finite asexual populations |
| Module | Description |
|---|---|
| Autosomal Locus | Genotype frequency changes under different mating systems |
| X-Linked Locus | Allele frequency dynamics for X-linked loci with sex-specific inheritance |
| Assortative Mating | Positive and negative assortative mating effects on genotype frequencies |
| Assortative Matrix | Full mating-type matrix showing all possible crosses and offspring frequencies |
| Module | Description |
|---|---|
| Continent-Island Model | One-way migration from a large source to a smaller population |
| Island-Island Model | Symmetric migration between two populations |
| Stepping-Stone Model | Migration between adjacent populations in a linear array |
| F-Statistics | Wright's F_ST, F_IS, and F_IT with drift and migration |
| Wahlund Effect | Heterozygote deficiency from population subdivision |
| Module | Description |
|---|---|
| Linkage Disequilibrium | Measure and visualize D, D', and r² between two loci |
| Magnitude of D | Maximum and minimum values of D given allele frequencies |
| Linkage Histogram | Distribution of D values across replicate populations |
| Module | Description |
|---|---|
| Molecular Pop Gen | Summary statistics from sequence data: Watterson's θ, π, Tajima's D |
| Quantitative Trait Loci | Multi-locus trait evolution with environmental variance and stabilizing selection |
- No installation required — runs entirely in the browser
- Cross-platform — works on Windows, macOS, Linux, tablets, and smartphones
- Dark and light themes — automatic chart adaptation
- Run comparison system — save parameter sets and overlay multiple trajectories
- Export capabilities — download charts and data
- Offline support — works without internet once cached
- Privacy-preserving — all computation happens client-side
- SvelteKit — Framework with file-based routing and static prerendering
- Svelte 5 — Runes reactivity system (
$state,$derived,$effect,$props) - D3.js v7 — SVG chart rendering with animated line drawing
- TypeScript — Strict mode throughout
- Vite — Build tool and dev server
- Cloudflare Pages — Static hosting
| Command | Description |
|---|---|
npm run dev |
Start dev server with hot module replacement |
npm run build |
Production build (static output to build/) |
npm run preview |
Preview the production build locally |
npm run check |
Run TypeScript type checking |
npm run check:watch |
Type checking in watch mode |
npm run deploy |
Build and deploy to Cloudflare Pages |
src/
lib/
sim/ Pure simulation functions (no DOM, no Svelte)
charts/ D3 chart renderers (line, drift, De Finetti, curve, histogram)
components/ Shared Svelte 5 components
help/ Educational content for each module
theme.ts Dark/light theme store
routes/ SvelteKit file-based routing (one directory per module)
app.css Design tokens for dark and light themes
app.html HTML shell
PopGene.S/ Original VB.NET desktop application (reference)
docs/paper/ Manuscript and figures
The codebase follows a strict three-layer separation:
-
Simulation layer (
lib/sim/*.ts) — Pure functions that accept parameter objects and return arrays of trajectories (SimPoint[][]). No DOM access, no framework imports. Each module exports a typed params interface, a defaults constant, and a simulation function. -
Visualization layer (
lib/charts/*.ts) — D3 rendering functions that take a DOM container and data. They read theme colors from CSS custom properties at render time, so charts automatically adapt to dark/light mode. -
UI layer (
routes/*/+page.svelte) — Thin page components that wire reactive state to simulation functions and chart components. All pages share the sameSimLayoutcomponent which provides the topbar controls, Run/Reset buttons, and full-bleed chart area.
This separation enables potential reuse of simulation code in other contexts such as R packages or command-line tools.
Two themes (dark default, light toggle) defined entirely through CSS custom properties in app.css. Eight visualization colors (--viz-1 through --viz-8) cycle for multi-series charts. D3 renderers read these at render time via getComputedStyle, so switching themes re-renders all charts without page reload.
Contributions are welcome! Please see CONTRIBUTING.md for guidelines.
- Report bugs: Open an issue describing the problem and steps to reproduce
- Request features: Open an issue describing the desired functionality
- Submit changes: Fork the repo, create a branch, and submit a pull request
If you use PopGeneJS in your teaching or research, please cite:
@article{nuin2026popgenejs,
author = {Nuin, Paulo A. S.},
title = {{PopGeneJS}: A Browser-Based Platform for Population Genetics Education},
journal = {Journal of Open Source Software},
year = {2026},
note = {Software available at https://popgenejs.bioinformat.org}
}- WinPop 2.5 — Original desktop application (Nuin, 2005)
- Genie — Interactive genetic drift simulation (Castillo et al., 2022)
- HHMI Population Genetics Explorer — Hardy-Weinberg focused teaching tool
Paulo A. S. Nuin Bioinformat, Edmonton, Alberta, Canada Email: nuin@genedrift.org