-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
33 lines (33 loc) · 10.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="google-site-verification" content="cWnIgnYJ9UyQZYimSJVqo9SaA1NUHKj-Zstn12W4KQA"/><meta name="theme-color" content="#000000"/><meta name="description" content="An experiment to analyse how a virus spread over a community"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Simulating coronavirus with the SIR model</title><meta name="description" content="An experiment to analyse how an infectious disease spread over a community"/><link href="/static/css/main.c77ad006.chunk.css" rel="stylesheet"></head><body><script async src="https://www.googletagmanager.com/gtag/js?id=UA-162516867-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-162516867-1")</script><script data-ad-client="ca-pub-5587173855104127" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script><noscript><div id="root"><div class="App_container__1MQN3"><div class="App_header__3ZZ1n"><h3>Simulating coronavirus with the SIR model</h3><h2>An experiment to analyse how a virus spread over a community</h2></div><div class="App_simulation__1Y9Gr"><div class="App_samples__2e7V-"><span class="App_sampleSuspectible__3MOvD">Susceptible</span><span class="App_sampleInfected__1l1Pi">Infected</span><span class="App_sampleRecovered__33NzV">Recovered</span><i>Click on a building to lock it (quarantine)</i></div><svg width="880" height="700" style="shape-rendering:geometricprecision"><g id="house-10-0" transform="translate(
791.6746567696786,
476.91842314019124
)"><circle class="Graph_node__2LUmU Graph_suspectible__qkWqd" r="5" stroke="0" fill="black"></circle></g></svg></div><div class="App_section__1OL6S"><div class="App_stats__2fMs7"><h3>Stats</h3><div class="App_population__3MVPW">POPULATION: 378<br>DEAD: 16<br>RECOVERED: 33<br>SICK: 210<br></div><span class="LineChart_labelY__3CF0E">population →</span> <span class="LineChart_labelX__L30Wm">days since the first case →</span></div><div class="App_simulationSettings__txA-R"><h3>Settings</h3><div class="App_simulationInfo__1KRFk">Click on a building on the map to make it quarantined.</div><div class="SimulationSettings_container__vY4rL"><div class="SimulationSettings_form__E6YUW"><label>Initial sick agents<br><input type="range" min="0" max="10" value="1"> <span class="SimulationSettings_value__1sPd7">1</span></label><label>Agents per building<br><input type="range" min="1" max="10" value="9"> <span class="SimulationSettings_value__1sPd7">9</span></label><label>Houses<br><input type="range" min="0" max="100" value="42"> <span class="SimulationSettings_value__1sPd7">42</span></label><label>Bus stations<br><input type="range" min="0" max="10" value="1"> <span class="SimulationSettings_value__1sPd7">1</span></label><label>Hospitals<br><input type="range" min="0" max="10" value="1"> <span class="SimulationSettings_value__1sPd7">1</span></label><label>Supermarkets<br><input type="range" min="0" max="10" value="3"> <span class="SimulationSettings_value__1sPd7">3</span></label><label>Temples<br><input type="range" min="0" max="10" value="1"> <span class="SimulationSettings_value__1sPd7">1</span></label></div><div class="SimulationSettings_footer__1GRqa"><button>Restart the simulation</button></div></div></div></div><div class="App_pageInfo__2E9cf"><div class="App_section__1OL6S"><h1>What is this?</h1><p>This is a simulation of how a virus spread over the population. The simulation is heavily inspired by the SIR model. SIR is a technique used to simplify the mathematical modelling of infectious disase.</p><p>In the SIR model, we have three different states of each agent (a person). The first state is<i>SUSCEPTIBLE</i>, second one is <i>SICK</i>, and the last one is<i> RECOVERED</i>. We have also a <i>DEAD</i> state in this simulation.</p><h1>How does it work?</h1><p>Every agent starts with the `SUSCEPTIBLE` state in the simulation, except a few of them. Some of the agents are on the `SICK` state at the very beginning. Over the time, sick agents spread the virus to rest of the population and the other agents get sick as well. After the infection, they switch into a recovered or a dead state based on some probabilistic values.</p><p>The probabilistic values are defined in a markov-chain concept. Markov chain is a stochastic model to describe a sequence of possible events that can occur in the future.</p><h1>How does a probabilistic model look like?</h1><p>We're using a markov graph to define a probabilistic transition. We can simply say that markov chain is a graph of all the possible state transitions of an individual node.</p><div style="height:600px"><iframe style="position:absolute;border:0 none;margin-left:-4em" src="https://fatiherikli.github.io/markov-chain-demo/index-en.html" width="970" height="650"></iframe></div><p>In a infectious disaese case, we can use markov chains to define the probabilistic chain of an person to be inftected, to be recovered, or to be dead. Furthermore, we can also define the possible travel route of an agent by using the same technique.</p><h1>How can we define a probabilistic model of an infecitious disease?</h1><p>As I previously mentioned, we can use the SIR model to set up the simulation, and we can use markov chains to define probabilistic model of an infectious disaese.</p><p style="font-weight:700">I would like to give a disclaimer that, I'm just an open-source developer who loves building data visualizations and simulations, I don't have a background of Epidemiology or other related stuff. Please don't take my assumptions seriously.</p><p>Here's the state transition map of an agent over the time.</p><pre>const SIR_TRANSITION_STATE = {
[SUSPECTIBLE]: [
[1, SUSPECTIBLE],
],
[RECOVERED]: [
[1, RECOVERED],
],
[SICK]: [
[0.995, SICK],
[0.004, RECOVERED],
[0.001, DEAD],
],
[DEAD]: [
[1, DEAD],
],
};</pre><p>Simulation's clock ticks on each second. On each tick, all the agents are subject to that transition map. As you can see on that object, we have defined states as keys, and possible values of that specific state. For example, a susceptible person will be always suspectible, there's no any state change for that state, yet. But for a sick agent, there are two more possible states different than it's actual state. So the options are; staying as sick until the next state transition, being recovered, or being dead. The values defined before the next state is the probabilistic value.</p><pre>const DISEASE_SPREAD_TRANSITION = {
[SUSPECTIBLE]: [
[0.3, SICK],
[0.7, SUSPECTIBLE],
],
[RECOVERED]: [
[1, RECOVERED],
],
[SICK]: [
[1, SICK],
],
[DEAD]: [
[1, DEAD],
],
};</pre><p>The previous transition map was for a person who has no any interaction with a sick person. When an agent meets with a sick person, the possibility of getting sick is different. As you can see on this map, a susceptible person will get sick by the possibility of %30.</p><p>Question: In that map, people who already recovered from the virus develop an immunity and don't get sick again. How could we define the probabilistic map if the disease was super infectious and people who recovered don't gain any immunity?</p><h2>Other simulations</h2><p>If you liked that stuff, you can explore other simulations that I created in the past.</p><ul><li><a href="https://fatiherikli.github.io/post-truth/">Post-truth: How a disinformation spreads over a community</a></li><li><a href="https://fatiherikli.github.io/language-evolution-simulation/">Language-evolution: Simulation of the evolution of languages</a></li><li><a href="https://fatiherikli.github.io/crowd-simulation/">Crowd-of-istanbul: Crowd simulation of Istanbul streets</a></li></ul><br><h1>I would like to discover more</h1><p>This is an MIT-licensed open-source project, you can find the source code on github. Feel free to copy, use or modify it for your own simulations.</p><p><a href="https://github.com/fatiherikli/coronavirus-simulation">https://github.com/fatiherikli/coronavirus-simulation</a></p><p style="margin-bottom:4em">Thanks for reading this article, and stay safe!<br><a href="https://twitter.com/fthrkl">@fthrkl</a></p></div></div></div></div></noscript><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,i,l=r[0],f=r[1],a=r[2],c=0,s=[];c<l.length;c++)i=l[c],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var f=t[l];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=i(i.s=t[0]))}return e}var n={},o={1:0},u=[];function i(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.m=e,i.c=n,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,r){if(1&r&&(e=i(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)i.d(t,n,function(r){return e[r]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="/";var l=this.webpackJsonpeusim=this.webpackJsonpeusim||[],f=l.push.bind(l);l.push=r,l=l.slice();for(var a=0;a<l.length;a++)r(l[a]);var p=f;t()}([])</script><script src="/static/js/2.f65a091a.chunk.js"></script><script src="/static/js/main.d3ee6b9d.chunk.js"></script></body></html>