-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
98 lines (80 loc) · 6.39 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="Simulación de difusión de coronavirus" />
<meta property="og:description" content="Una simulación interactiva de la difusión del coronavirus de acuerdo a tres parametros modificables: población, tasa de mortalidad y distancia social." />
<meta property="og:image" content="https://lab-tecnosocial.github.io/difusion_coronavirus/preview2.png" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@labtecnosocial"/>
<meta name="twitter:creator" content="@labtecnosocial"/>
<meta name="twitter:title" content="Simulación de difusión de coronavirus"/>
<meta name="twitter:description" content="Una simulación interactiva de la difusión del coronavirus de acuerdo a tres parametros modificables: población, tasa de mortalidad y distancia social."/>
<meta name="twitter:image" content="https://lab-tecnosocial.github.io/difusion_coronavirus/preview2.png"/>
<!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
<script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
<script language="javascript" type="text/javascript" src="persona.js"></script>
<script language="javascript" type="text/javascript" src="difusion_coronavirus.js"></script>
<!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
<link rel="stylesheet" type="text/css" href="estilo.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header class="main-head">
<h1>Simulación de difusión de coronavirus</h1>
<h2><a href="http://labtecnosocial.org/" target="_blank">Lab TecnoSocial</a></h2>
<p style="text-align: right">18/03/2020</p>
<p>Una simulación interactiva de la difusión del coronavirus de acuerdo a tres parametros modificables: población, tasa de mortalidad y distancia social. Se parte de una población sana (nodos verdes) con posiciones y movimientos aleatorios, donde existe un paciente cero portador del virus. Se ve rápidamente cómo crece el contagio por cruce entre nodos y aparece una población enferma (nodos amarillos) con el consiguiente crecimiento cuasi exponencial de la curva epidémica (amarilla). A medida que evoluciona el contagio aparecen decesos (nodos rojos) pero también personas recuperadas (nodos lilas). Una vez que el brote está completo se puede examinar el gráfico de area debajo de la simulación y observar el crecimiento en el tiempo de las distintas poblaciones a partir de los parametros establecidos en el panel de controles.</p>
</header>
<nav class="main-nav">
<table align="center">
<tr>
<th>Parametro</th>
<th>Ajuste</th>
<th>Valor</th>
</tr>
<tr>
<td>Población</td>
<td><input id="pobSlider" type="range" min="50" max="500" value="200" step="10" style="width: 100px;"></td>
<td id="pob">200</td>
</tr>
<tr>
<td>Tasa de mortalidad</td>
<td><input id="mortSlider"type="range" min="0" max="100" value="7" style="width: 100px;"></td>
<td id="mort">7</td>
</tr>
<tr>
<td>Distancia social</td>
<td><input id="socSlider" type="range" min="0" max="100" value="0" step="10" style="width: 100px;"></td>
<td id="soc">0</td>
</tr>
</table>
<button id="ini" align="center">INICIAR SIMULACION</button>
</nav>
<article id="content"></article>
<div class="card">
<p>Es recomendable realizar varias simulaciones con parametros distintos y examinar sus respectivos gráficos de area. Para ello se deben establecer los parametros y luego dar clic en el botón "iniciar simulación". Se recomienda los tres siguientes conjuntos de parametros de inicio para observar diferencias en la evolución del contagio:</p>
<ul>
<li>Crecimiento cuasi exponencial de la difusión:
<ul>
<li>Población: 50 a 500. Entre más grande la población más rápido el contagio.</li>
<li>Tasa de mortalidad: 3 a 7%. La tasa de mortalidad varía de acuerdo a las franjas de edad y los sistemas de salud nacionales. La OMS ha estimado a 3 de marzo de 2020 <a href="https://www.worldometers.info/coronavirus/coronavirus-death-rate/" target="_blank">una tasa de mortalidad global del 3,4%</a>, mientras la gripe estacional sólo tienen una tasa del 1%. Pero en personas de la tercera edad la tasa de mortalidad puede llegar <a href="https://elpais.com/ciencia/2020-03-14/cual-es-la-tasa-de-letalidad-del-nuevo-coronavirus-en-las-personas-mayores.html" target="_blank">hasta el 16,6% como en el caso de Italia</a>.</li>
<li>Distancia social: 0%. Con este parametro se puede apreciar el ascenso rápido de la curva epidémica en amarillo. A mayor interacción mayor difusión. La distancia social en la simulación se visualiza como el porcentaje de la población que reduce sus movimientos e interacciones.</li>
</ul>
<li>Medida de mitigación leve:</li>
<ul>
<li> Distancia social: 40%. Aunque existe un crecimiento menos vertiginoso y un cierto aplanamiento leve de la curva de contagio, éste no es suficiente.</li>
</ul>
<li>Medida de mitigación fuerte:</li>
<ul>
<li>Distancia social: 90%. Aquí se puede osbservar con claridad el "aplanamiento de la curva epidémica" (curva amarilla). Para el caso de los sistemas de salud precarios, como el de Bolivia, esta medida busca evitar el colapso en la atención de enfermos de coronavirus, como ya se está dando en <a href="https://elpais.com/espana/madrid/2020-03-09/madrid-sufre-los-recortes-y-se-arriesga-al-colapso-sanitario-por-el-coronavirus.html" href="_blank">España.</a></li>
</ul>
</ul>
</div>
<footer class="main-footer">
<p>Esta simulación tiene un objetivo didáctico y está basada inicialmente en las ideas de este artículo del <a href="https://www.washingtonpost.com/graphics/2020/world/corona-simulator-spanish/" target="_blank">Washington Post</a>. Nosotros añadimos la interacción, la ui en HTML y CSS, los parametros modificables en JavaScript para el usuario y modificamos algunas variables. El código de nuestra simulación puede verse en el siguiente <a href="https://github.com/lab-tecnosocial/difusion_coronavirus" target="_blank">repositorio</a>.</p>
</footer>
</div>
</body>
</html>