SIR in the Netherlands

by bramvandijk88

HTML

<html>
<script src="https://bramvandijk88.github.io/cacatoo/scripts/cacatoo.js"></script>
    <script src="https://bramvandijk88.github.io/cacatoo/scripts/all.js"></script>
    <link rel="stylesheet" href="https://bramvandijk88.github.io/cacatoo/styles/cacatoo.css">

<script>


</script>

<body onload="cacatoo()">
<div class="header" id="header">
    <h2>Cacatoo</h2>
</div>
<div class="content" id="movie">
<div class="content" id="canvas_holder">
    <center>
        <div style="width:40%;">
    </center>
</div>
<div class="content" id="graph_holder"> </div>
</div>
<div class="content" id="form_holder"></div>
<div class="footer" id="footer"></div>

<!-- Add this just before </body> in your HTML tab -->
<button id="dark-toggle" onclick="document.body.classList.toggle('dark'); this.textContent = document.body.classList.contains('dark') ? '☀ Light' : '🌙 Dark'">🌙 Dark</button>


</body>

</html>

JavaScript

/**
 * SIR Model with image-based grid initialization
 * Two options for image mapping: range-based or exact color matching
 */
let sim;

// Illustrating the new PNG image mapping with two examples of PNGs of the netherlands
// 1 for range-based, colours in a flag map to states
// 2 for exact mapping, colours (white) map to "quiescent" (X)
let option = 1; 
var init_density = 0.2;
var meanInfectionDuration = 5;
var meanRecoveryDuration = 10;
var vaccination = 0.0;
var stdDev = 0.4;
var d = 0.0;
var delta = 0.01;
var mix = 0;

/**
 * Main simulation initialization function
 */
function cacatoo() {
  // Configuration
  let config = {
    title: 'SIR spirals in the Netherlands',
    description: 'SIR model with spatial structure',
    maxtime: 100000,
    ncol: 400,
    nrow: 500,
    wrap: [false, false],
    scale: 1,
    graph_update: 5,
    graph_interval: 1,
    sleep: 0,
    bgcolour: 'lightgrey',
    statecolours: {
      type: {
        S: '#4E1681',
        I: 'red',
        R: 'white',
      },
    },
  };

  // Initialize simulation
  sim = new Simulation(config);
  
  sim.makeGridmodel('sir');

  // Reset function with both mapping options
  sim.reset = function() {
    if(option === 1) {
      // Range-based color mapping
      const rangeStateMapping = [
        { rMin: 0, rMax: 100, gMin: 0, gMax: 100, bMin: 100, bMax: 255, aMin: 0, aMax: 255, state: 'S' },
        { rMin: 100, rMax: 255, gMin: 0, gMax: 100, bMin: 0, bMax: 100, aMin: 0, aMax: 255, state: 'I' },
        { rMin: 150, rMax: 250, gMin: 150, gMax: 250, bMin: 150, bMax: 250, aMin: 0, aMax: 255, state: 'R' },
        { rMin: 200, rMax: 255, gMin: 200, gMax: 255, bMin: 200, bMax: 255, aMin: 0, aMax: 255, state: 'X' }
      ];

      sim.loadPNGToGrid(
        "https://bramvandijk88.github.io/cacatoo/images/netherlands_rwb.png",
        rangeStateMapping,
        "sir",
        "type",
        function() {
         ...