<iframe src="https://jsxgraph.org/share/iframe/epidemiology-sir-model" style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" name="JSXGraph example: Epidemiology: SIR model" allowfullscreen ></iframe>
<input type="button" value="clear and run a simulation of 100 days" onClick="clearTurtle(); run()"><br/> <input type="button" value="stop" onClick="stop()"><br/> <input type="button" value="continue" onClick="goOn()"> <div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; "> <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div> </div> <script type = "text/javascript"> /* This example is licensed under a Creative Commons Attribution 4.0 International License. https://creativecommons.org/licenses/by/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'board-0'; const board = JXG.JSXGraph.initBoard(BOARDID, { axis: true, boundingbox: [-5, 1.2, 100, -1.2], showNavigation: false }); // Turtles var S = board.create('turtle', [], { strokeColor: 'blue', strokeWidth: 3 }); var I = board.create('turtle', [], { strokeColor: 'red', strokeWidth: 3 }); var R = board.create('turtle', [], { strokeColor: 'green', strokeWidth: 3 }); // Sliders var s = board.create('slider', [ [0, -0.6], [30, -0.6], [0, 1.27E-6, 1] ], { name: 's' }); board.create('text', [10, -0.3, "initially infected population rate (on load: I(0)=1.27E-6)"]); var beta = board.create('slider', [ [0, -0.7], [30, -0.7], [0, 0.5, 1] ], { name: 'β' }); board.create('text', [45, -0.7, "β: infection rate"]); var gamma = board.create('slider', [ [0, -0.8], [30, -0.8], [0, 0.3, 1] ], { name: 'γ' }); board.create('text', [45, -0.8, "γ: recovery rate = 1/(days of infection)"]); var t = 0; // global board.create('text', [10, -0.2, function() { return "Day " + t + ": infected=" + (7900000 * I.Y()).toFixed(1) + " recovered=" + (7900000 * R.Y()).toFixed(1); } ]); // Reset the turtles var clearTurtle = function () { S.cs(); I.cs(); R.cs(); S.hideTurtle(); I.hideTurtle(); R.hideTurtle(); }; // Start the animation var run = function() { S.setPos(0, 1.0 - s.Value()); R.setPos(0, 0); I.setPos(0, s.Value()); delta = 1; // global t = 0; // global loop(); }; var turtleMove = function (turtle, dx, dy) { turtle.moveTo([dx + turtle.X(), dy + turtle.Y()]); }; // Animation var loop = function() { var dS = -beta.Value() * S.Y() * I.Y(); var dR = gamma.Value() * I.Y(); var dI = -(dS + dR); turtleMove(S, delta, dS); turtleMove(R, delta, dR); turtleMove(I, delta, dI); t += delta; if (t < 100.0) { active = setTimeout(loop, 10); } }; // Stop animation var stop = function() { if (active) clearTimeout(active); active = null; }; // Continue var goOn = function() { if (t > 0) { if (active === null) { active = setTimeout(loop, 10); } } else { run(); } }; clearTurtle(); </script>
/* This example is licensed under a Creative Commons Attribution 4.0 International License. https://creativecommons.org/licenses/by/4.0/ Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits. */ const BOARDID = 'your_div_id'; // Insert your id here! const board = JXG.JSXGraph.initBoard(BOARDID, { axis: true, boundingbox: [-5, 1.2, 100, -1.2], showNavigation: false }); // Turtles var S = board.create('turtle', [], { strokeColor: 'blue', strokeWidth: 3 }); var I = board.create('turtle', [], { strokeColor: 'red', strokeWidth: 3 }); var R = board.create('turtle', [], { strokeColor: 'green', strokeWidth: 3 }); // Sliders var s = board.create('slider', [ [0, -0.6], [30, -0.6], [0, 1.27E-6, 1] ], { name: 's' }); board.create('text', [10, -0.3, "initially infected population rate (on load: I(0)=1.27E-6)"]); var beta = board.create('slider', [ [0, -0.7], [30, -0.7], [0, 0.5, 1] ], { name: 'β' }); board.create('text', [45, -0.7, "β: infection rate"]); var gamma = board.create('slider', [ [0, -0.8], [30, -0.8], [0, 0.3, 1] ], { name: 'γ' }); board.create('text', [45, -0.8, "γ: recovery rate = 1/(days of infection)"]); var t = 0; // global board.create('text', [10, -0.2, function() { return "Day " + t + ": infected=" + (7900000 * I.Y()).toFixed(1) + " recovered=" + (7900000 * R.Y()).toFixed(1); } ]); // Reset the turtles var clearTurtle = function () { S.cs(); I.cs(); R.cs(); S.hideTurtle(); I.hideTurtle(); R.hideTurtle(); }; // Start the animation var run = function() { S.setPos(0, 1.0 - s.Value()); R.setPos(0, 0); I.setPos(0, s.Value()); delta = 1; // global t = 0; // global loop(); }; var turtleMove = function (turtle, dx, dy) { turtle.moveTo([dx + turtle.X(), dy + turtle.Y()]); }; // Animation var loop = function() { var dS = -beta.Value() * S.Y() * I.Y(); var dR = gamma.Value() * I.Y(); var dI = -(dS + dR); turtleMove(S, delta, dS); turtleMove(R, delta, dR); turtleMove(I, delta, dI); t += delta; if (t < 100.0) { active = setTimeout(loop, 10); } }; // Stop animation var stop = function() { if (active) clearTimeout(active); active = null; }; // Continue var goOn = function() { if (t > 0) { if (active === null) { active = setTimeout(loop, 10); } } else { run(); } }; clearTurtle();
<input type="button" value="clear and run a simulation of 100 days" onClick="clearTurtle(); run()"><br/> <input type="button" value="stop" onClick="stop()"><br/> <input type="button" value="continue" onClick="goOn()">
// Define the id of your board in BOARDID const board = JXG.JSXGraph.initBoard(BOARDID, { axis: true, boundingbox: [-5, 1.2, 100, -1.2], showNavigation: false }); // Turtles var S = board.create('turtle', [], { strokeColor: 'blue', strokeWidth: 3 }); var I = board.create('turtle', [], { strokeColor: 'red', strokeWidth: 3 }); var R = board.create('turtle', [], { strokeColor: 'green', strokeWidth: 3 }); // Sliders var s = board.create('slider', [ [0, -0.6], [30, -0.6], [0, 1.27E-6, 1] ], { name: 's' }); board.create('text', [10, -0.3, "initially infected population rate (on load: I(0)=1.27E-6)"]); var beta = board.create('slider', [ [0, -0.7], [30, -0.7], [0, 0.5, 1] ], { name: 'β' }); board.create('text', [45, -0.7, "β: infection rate"]); var gamma = board.create('slider', [ [0, -0.8], [30, -0.8], [0, 0.3, 1] ], { name: 'γ' }); board.create('text', [45, -0.8, "γ: recovery rate = 1/(days of infection)"]); var t = 0; // global board.create('text', [10, -0.2, function() { return "Day " + t + ": infected=" + (7900000 * I.Y()).toFixed(1) + " recovered=" + (7900000 * R.Y()).toFixed(1); } ]); // Reset the turtles var clearTurtle = function () { S.cs(); I.cs(); R.cs(); S.hideTurtle(); I.hideTurtle(); R.hideTurtle(); }; // Start the animation var run = function() { S.setPos(0, 1.0 - s.Value()); R.setPos(0, 0); I.setPos(0, s.Value()); delta = 1; // global t = 0; // global loop(); }; var turtleMove = function (turtle, dx, dy) { turtle.moveTo([dx + turtle.X(), dy + turtle.Y()]); }; // Animation var loop = function() { var dS = -beta.Value() * S.Y() * I.Y(); var dR = gamma.Value() * I.Y(); var dI = -(dS + dR); turtleMove(S, delta, dS); turtleMove(R, delta, dR); turtleMove(I, delta, dI); t += delta; if (t < 100.0) { active = setTimeout(loop, 10); } }; // Stop animation var stop = function() { if (active) clearTimeout(active); active = null; }; // Continue var goOn = function() { if (t > 0) { if (active === null) { active = setTimeout(loop, 10); } } else { run(); } }; clearTurtle();
This example is licensed under a Creative Commons Attribution 4.0 International License. Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.