28:null 29:["$","title",null,{"children":"SIR Model (Simulation) | Stevan Springer | Observable"}] 2e:Tcaa,//20201008 Copyright Stevan Springer (stevan.springer@gmail.com) text1 = md`# SIR Model (Simulation) ### *Simulating viral transmission in a host population.* ----- ## Modeling the Spread of Viruses Between Hosts Imagine a population of individuals being invaded by a **virus**. Each individual in the population is potentially a **host** for the virus. Hosts can be in several different **states**: ### States ${canvas1("S")} **Susceptible (S)** - vulnerable to the virus. ${canvas1( "I" )} **Infected (I)** - carrying the virus and can infect other hosts. ${canvas1( "R" )} **Recovered(R)** - immune to the virus following a natural infection. ----- ### Changes Scientists use **models** to make **predictions**. We want to make a model that can predict how many hosts will be infected by the virus. So in our model hosts will get **infected** and they will **recover**: they will **change** from one **state** to another. **Infection** is a change that happens when hosts **interact** with each other. Contact allows the virus to move from one host to another. ${canvas1("I")}${canvas1("S")} => ${canvas1("I")}${canvas1( "I" )} **Infection.** An infected host transmits the virus. **Recovery** is a change that happens when hosts get better. After an infection hosts build natural **immunity** and can not be reinfected. ${canvas1("I")} => ${canvas1( "R" )} **Recovery.** An infected host heals and becomes immune. ----- ## Simulation of a Viral Epidemic The **SIR model** will help us understand how a virus spreads from host to host. So we can predict how many hosts will be infected at a given time. The answer depends on the **parameters**, which are the settings of the model. Different **settings** can cause the model to have different **outcomes**. The first thing scientists do is make an **educated guess**. Some parameters are set based on experiments or other measurements. Some parameters are allowed to vary across many different values, so that we can **explore** what might happen in different circumstances. ### Once you have a prediction, use the sliders to set your parameters *1) Try **different values** for each **slider** to test your **intuition** about how the **model** represents a ** viral epidemic**. 2) Try the **same parameter settings** more than once. Do **identical parameters** always produce the **same outcome** *? ----- ### Parameters You can use sliders to control how often **changes** between **states** happen. In this model you can control three **parameters**: ` //${canvas1("I")}${canvas1("S")} => ${canvas1("I")}${canvas1("I")} **Infection.** An infected host transmits the virus. //${canvas1("I")} => ${canvas1("R")} **Recovery.** An infected host heals and becomes immune. //Other States //${canvas1("V")} **Vaccinated(V)** - immune to the virus because of vaccination. //${canvas1("D")} **Dead(D)** - killed by the virus. //Other Changes //${canvas1("I")} => ${canvas1("D")} **Death.** An infected host dies of the viral infection. //${canvas1("R")} => ${canvas1("S")} **Loss of Immunity.** A recovered host becomes susceptible again. //${canvas1("V")} => ${canvas1("S")} **Loss of Immunity.** A vaccinated host becomes susceptible again.2f:T114e,canvas = { replay; // set variables var start = Date.now(); let timer = null; var freq_S = []; var freq_I = []; var freq_R = []; var time = []; const h = 250; // set population var population = d3.range(100).map(function (d, i) { //note 100 is population size (replaced ne slider with fixed value) if (Math.random() >= 0.05) { //initial frequency of infected hard coded at 0.05 var host_type = "S"; } else { var host_type = "I"; } return { x: w * Math.random(), y: h * Math.random(), dx: (Math.random() - 0.5) * speed * 10, dy: (Math.random() - 0.5) * speed * 10, r: 5, status: host_type, isColliding: false }; }); // create canvas var canvas = document.createElement("canvas"); canvas.width = w + 10; canvas.height = h + 10; var context = canvas.getContext("2d"); // function that draws a single node in a population function drawNode(d) { context.beginPath(); if (d.status == "S") { context.fillStyle = "#FDE725"; } else if (d.status == "I") { context.fillStyle = "#F89540"; } else if (d.status == "R") { context.fillStyle = "#21918C"; } context.arc(d.x, d.y, d.r, 0, d.r * Math.PI); context.fill(); } // function that updates the location of each node function updateNode(d) { d.x += d.dx; if (d.x > w) { d.x = w; d.dx = -d.dx; } // right else if (d.x < 0) { d.x = 0; d.dx = -d.dx; } // left d.y += d.dy; if (d.y > h) { d.dy = -d.dy; d.y = h; } // bottom else if (d.y < 0) { d.dy = -d.dy; d.y = 0; } // top drawNode(d); } // function that calculates the frequency function updatePlot() { var count_S = 0; var count_I = 0; var count_R = 0; for (var g = 0; g < population.length; g++) { if (population[g].status == "S") { count_S = count_S + 1; } else if (population[g].status == "I") { count_I = count_I + 1; } else { count_R = count_R + 1; } } freq_S.push(count_S / population.length.toFixed(2)); freq_I.push(count_I / population.length).toFixed(2); freq_R.push(count_R / population.length).toFixed(2); time.push(time.length); viewof plot.value = [time, freq_S, freq_I, freq_R]; } // function to detect collision between two nodes function detectCollision(n1, n2, isfirst) { // Calculate the distance between the two circles let squareDistance = (n1.x - n2.x) * (n1.x - n2.x) + (n1.y - n2.y) * (n1.y - n2.y); // when colliding if (squareDistance <= 2 * n1.r * (2 * n2.r)) { if (isfirst) { n2.x = w * Math.random(); n2.y = w * Math.random(); } if (n1.isColliding == false || n2.isColliding == false) { n1.isColliding = true; n2.isColliding = true; n1.dx = -1 * n1.dx; n1.dy = -1 * n1.dy; n2.dx = -1 * n2.dx; n2.dy = -1 * n2.dy; //CHANGES //Infection of an S individual } if (n1.status == "I" && n2.status == "S" && Math.random() < rate_I) { n1.status = "I"; n2.status = "I"; } else if ( n1.status == "S" && n2.status == "I" && Math.random() < rate_I ) { n1.status = "I"; n2.status = "I"; } // Recovery of an I individual else if (n1.status == "I" && Math.random() < rate_R) { n1.status = "R"; } else if (n2.status == "I" && Math.random() < rate_R) { n2.status = "R"; } } else { n1.isColliding = false; n2.isColliding = false; } } for (var g = 0; g < population.length; g++) { for (var j = g + 1; j < population.length; j++) { detectCollision(population[g], population[j], true); } } timer = d3.timer(ticked); function ticked() { var now = Date.now(), duration = now - start; //if(duration % 500 ==0){ updatePlot(); //} // Update the circle positions. context.clearRect(0, 0, w + 10, h + 10); context.save(); // check collisions for (var g = 0; g < population.length; g++) { for (var j = g + 1; j < population.length; j++) { detectCollision(population[g], population[j], false); } } population.forEach(function (d) { updateNode(d); }); context.restore(); } return canvas; }30:T693,timeLineChart = { replay; let timer = null; const height = 250; const x = d3 .scaleLinear() .domain([0, viewof plot.time.length]) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, 1]) .range([height - margin.bottom, margin.top]); const svg = d3.create("svg").attr("viewBox", [0, 0, w, height]); const xaxis = svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); svg .append("g") .attr("transform", `translate(${margin.left - 10},0)`) .call(d3.axisLeft(y).ticks(8)) .call((g) => g.select(".domain").remove()); const path_S = svg .append("path") .attr("fill", "none") .attr("stroke", "#FDE725") .attr("stroke-width", 4); const path_I = svg .append("path") .attr("fill", "none") .attr("stroke", "#F89540") .attr("stroke-width", 4); const path_R = svg .append("path") .attr("fill", "none") .attr("stroke", "#21918C") .attr("stroke-width", 4); function update() { path_S.attr( "d", d3 .line() .x(x) .y((_, i) => y(viewof plot.freq_S[i]))(viewof plot.time) ); path_I.attr( "d", d3 .line() .x(x) .y((_, i) => y(viewof plot.freq_I[i]))(viewof plot.time) ); path_R.attr( "d", d3 .line() .x(x) .y((_, i) => y(viewof plot.freq_R[i]))(viewof plot.time) ); x.domain([0, viewof plot.time.length]); xaxis.call(d3.axisBottom(x)); svg.dispatch("input"); } console.log(viewof plot); timer = d3.timer(update); return svg.node(); }31:T467,text3 = md` ### Interpreting the Graph *1) What does each **bouncing dot** represent? A **host** or a **virus**, or **both**? 2) How can you tell where the **virus** is? 3) What do the **x axis** and the **y axis** represent?* ### Interpreting the Model *4) What **settings** cause viruses to spread **quickly** or **slowly**? 5) Do **all** the hosts always get infected? 6) Does the **frequency** of **susceptible** hosts always decline? 7) Why does the **frequency** of **infected** hosts often go up, and then down?* ### Extending the Model *8) **Vaccination** allows hosts to become immune without being infected. Do you think vaccination would change the spread of the virus? 9) **Social distancing** reduces the rate of contact between hosts. How does social distancing change the number of people infected at any one time? 10) How much control do we have over **recovery rate?** * ### Bonus Question for Epidemiology Experts! *11) If we want to **stop the spread** of a virus, what are the most **effective strategies**? Which parameters can we change, and which ones are not under our control?*`32:[] 2c:{"id":"e213bfd1844ab97d","slug":"sir-model-simulation","title":"SIR Model (Simulation)","thumbnail":"582774bdc0a794583eeb7bf917ea3d04128889a67a5bb981f35158e3a846e958","access_level":"public","create_time":"$D2020-12-25T20:16:48.531Z","update_time":"$D2021-11-19T17:18:16.302Z","view_time":null,"first_public_time":"$D2021-11-13T13:03:18.280Z","has_unpublished_edits":null,"fork":{"id":"b2d5d609d0caa8e1","slug":"hawks-and-doves_v2","title":"Hawks and Doves","owner":{"id":"f1d4d2734215caf8","login":"mei0603","name":"Mei Shimizu"}},"stars":3,"starred":false,"owner":{"type":"team","id":"0fec91d07be759ed","login":"stevan","name":"Stevan Springer","avatar_url":"https://avatars-next.observableusercontent.com/ec6faccd9add25b7c625596b4c7e9bf87c8ce757ad2e350333cda752f6207c31","tier":"starter_2024"},"version":1671,"publish_version":1671,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa65c6f0b85e129d","login":"stevan","name":"Stevan Springer","avatar_url":"https://avatars-next.observableusercontent.com/ec6faccd9add25b7c625596b4c7e9bf87c8ce757ad2e350333cda752f6207c31","tier":null}],"members":[{"type":"individual","id":"fa65c6f0b85e129d","login":"stevan","name":"Stevan Springer","avatar_url":"https://avatars-next.observableusercontent.com/ec6faccd9add25b7c625596b4c7e9bf87c8ce757ad2e350333cda752f6207c31","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"SIR Model (Simulation)","cells":[{"id":0,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"viewof speed = {\n const s = slider({\n title: \"Social Distance\",\n description: \"Do individuals contact each other rarely <= or => often?\",\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.5\n });\n s.input.style.width = \"80%\";\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"viewof rate_I = {\n const rate_I = slider({\n title: \"Infection rate\",\n description: \"Do infections occur rarely <= or => often?\",\n max: 1,\n step: 0.01,\n value: 0.5\n });\n rate_I.input.style.width = \"80%\";\n return rate_I;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"viewof rate_R = {\n const rate_R = slider({\n title: \"Recovery rate\",\n description: \"Do infected hosts recover slowly <= or => quickly?\",\n max: 1,\n step: 0.01,\n value: 0.5\n });\n rate_R.input.style.width = \"80%\";\n return rate_R;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"text2 = md`\n\n#### Press the **Start** button to begin a new simulation \n*If the computer slows down, refresh the page to start over.* \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1645,"value":"text4 = md`# Program Settings\nThe cells below contain information needed to run the simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"function canvas1(input) {\n // create canvas\n var canvas1 = document.createElement(\"canvas\");\n canvas1.width = 40;\n canvas1.height = 40;\n var context1 = canvas1.getContext(\"2d\");\n context1.beginPath();\n if (input == \"S\") {\n context1.fillStyle = \"#FDE725\";\n } else if (input == \"V\") {\n context1.fillStyle = \"#90D743\";\n } else if (input == \"I\") {\n context1.fillStyle = \"#F89540\";\n } else if (input == \"R\") {\n context1.fillStyle = \"#21918C\";\n } else if (input == \"D\") {\n context1.fillStyle = \"#440154\";\n } else {\n context1.fillStyle = \"Red\";\n }\n context1.arc(20, 20, 20, 0, 20 * Math.PI);\n context1.fill();\n\n return canvas1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"viewof plot = new View()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"class View {\n constructor() {\n this._time = [];\n this._freq_S = [];\n this._freq_I = [];\n this._freq_R = [];\n }\n\n get time() {\n return this._time;\n }\n\n get freq_S() {\n return this._freq_S;\n }\n\n get freq_I() {\n return this._freq_I;\n }\n\n get freq_R() {\n return this._freq_R;\n }\n\n set value(value) {\n this._time = value[0];\n this._freq_S = value[1];\n this._freq_I = value[2];\n this._freq_R = value[3];\n //this.dispatchEvent({type: \"input\", value});\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"import { slider, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"import {button} from \"@rohscx/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2d:"$2c:body"