This interactive simulator demonstrates how infectious diseases spread through populations using a deterministic, mean-field SEIRS compartmental model. It features real-time parameter adjustments and elegant visualizations to help understand epidemic dynamics, including vaccination, immunity waning, and disease-induced mortality.
|
|
|
|
- A modern web browser (Chrome, Firefox, Safari, or Edge)
- No installation or build process required!
-
git clone https://github.com/denniemok/seirs-demo.git
Or download ZIP directly.
-
Double-click
index.htmlto open directly in your browser, or use a local web server for full functionality:cd seirs-demo # Python 3 python -m http.server 8000 # Node.js npx http-server
Then open
http://localhost:8000in your browser.
The model divides the population into four compartments:
| Compartment | Description |
|---|---|
| S (Susceptible) | ๐ฆ Individuals who can contract the disease |
| E (Exposed) | ๐ฉ Individuals who are infected but not yet infectious |
| I (Infectious) | ๐ง Individuals who can transmit the disease |
| R (Recovered) | ๐จ Individuals who have immunity (temporary or permanent) |
The dynamics are governed by these differential equations:
dS/dt = -ฮฒSI + ฯR - ฮผS + ฮผ(1-p)
dE/dt = ฮฒSI - ฯE - ฮผE
dI/dt = ฯE - ฮณI - (ฮผ+ฮฑ)I
dR/dt = ฮณI - ฯR - ฮผR + ฮผp
| Symbol | Description |
|---|---|
| ฮฒ | Transmission rate |
| ฯ | Progression rate (1 / incubation period) |
| ฮณ | Recovery rate (1 / infectious period) |
| ฯ | Immunity waning rate (1 / immunity duration) |
| ฮผ | Natural mortality rate (1 / life expectancy) |
| ฮฑ | Disease-induced mortality rate (1 / infection-to-death period) |
| p | Vaccination rate |
| Feature | Technology |
|---|---|
| Numerical solver | 4th-order Runge-Kutta (RK4) |
| Data structures | Float64Array for performance |
| Visualization | D3.js v3.5.17 (SVG) |
| Documentation | JSDoc + inline comments |
seirs-demo/
โโโ ๐ index.html # Main HTML page with structure and equations
โโโ ๐ seirs.js # Core SEIRS model implementation and plotting logic
โโโ โ๏ธ params.js # Parameter definitions and UI control values
โโโ ๐จ seirs.css # Styling and responsive design
โโโ ๐ d3.min.js # D3.js library for visualization
Edit params.js to change parameter ranges and defaults:
// Example: Extend Rโ range from 1-5 to 1-10
R0: generateParams(1, 10, 0.1, 3.0)Modify seirs.css to customize the appearance. CSS variables make theming easy:
:root {
--color-susceptible: #2c3e50; /* Dark blue */
--color-exposed: #27ae60; /* Green */
--color-infectious: #e67e22; /* Orange */
--color-recovered: #3498db; /* Light blue */
}This project is built upon and inspired by:
- ๐ seir-demo by Rob Moss
- ๐ posepi2 by Martin Krzywinski
- ๐ D3.js by Mike Bostock
- ๐ Bjรธrnstad, O., Shea, K., Krzywinski, M. & Altman, N. The SEIRS model for infectious disease dynamics. Nature Methods 17:557โ558 (2020)
This model is intended for educational purposes to understand epidemiological dynamics. For public health decisions, please consult epidemiological experts and use validated, peer-reviewed models.
This project, including D3.js v3.5.17, is distributed under the BSD 3-Clause License.
Made with โค๏ธ for epidemiology education