-
Notifications
You must be signed in to change notification settings - Fork 13
/
defunciones.html
161 lines (129 loc) · 7.46 KB
/
defunciones.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
---
layout: default
---
<article>
<header>
<h1>{{ page.title | escape }}</h1>
</header>
<section>
<script src="{{ "/assets/javascript/summon_muertes.js" | relative_url }}"></script>
<h1 class='text-center' style='margin-bottom: 2%'>Defunciones nacionales por COVID-19</h1>
<div class="row d-flex justify-content-center">
<div class="card text-white bg-dark mb-3 col-md-4" style="max-width: 20rem;">
<div class="card-header text-center" style='text-transform: none;'>Defunciones</div>
<div class="card-body">
<h4 class="card-title text-center" id="muertes"></h4>
</div>
<div class="card-footer d-flex">
<small class="text-white" style='height: 1rem;' id='tiempo_actualizacion_0'></small>
</div>
</div>
<div class="card text-white bg-warning mb-3 col-md-4" style="max-width: 20rem;">
<div class="card-header text-center" style='text-transform: none;'>Defunciones últimas 24h</div>
<div class="card-body">
<h4 class="card-title text-center" id="muertes_nuevas"></h4>
</div>
<div class="card-footer d-flex">
<small class="text-white" style='height: 1rem;' id='tiempo_actualizacion_1'></small>
</div>
</div>
</div>
<div class='row d-flex justify-content-center'>
<a href="https://api.whatsapp.com/send?&text=https://mexicovid19.github.io/defunciones.html" class="fa fa-whatsapp"></a>
<a href="https://www.facebook.com/share.php?u=https://mexicovid19.github.io/defunciones.html" class="fa fa-facebook"></a>
<a href="https://twitter.com/intent/tweet?text=Check%20this%20awesome%20website&url=https://mexicovid19.github.io/defunciones.html&title=Mexicovid19" class="fa fa-twitter"></a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://mexicovid19.github.io/defunciones.html" class="fa fa-linkedin"></a>
<a href="http://www.reddit.com/submit?url=https://mexicovid19.github.io/defunciones.html&title=Mexicovid19" class="fa fa-reddit"></a>
</div>
<h1 class="text-center" style='margin-top: 5%; text-transform: none;'>Mapa</h1>
<p id="tiempo_actualizacion_2"> </p>
<p class='text-center'>Los colores no representan los casos totales, sino que son generados a partir de las defunciones por cada 100 mil habitantes</p>
<div class="justify-content-center row d-flex">
<div id="mapa_muertes"></div>
</div>
<script src="{{ "/assets/javascript/mapa_muertes.js" | relative_url }}"></script>
<form method="get" action="estados.html">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-info">Consulta la información para cada estado</button>
</form>
<div class="row d-flex justify-content-center" id="cont_graf">
<div class="justify-content-center" id="grafica_muertes"><h1 class="text-center" style='margin-top: 5%; text-transform: none;'>Defunciones totales</h1><p id="tiempo_actualizacion_3"></p>
<div class="btn-block justify-content-center" role="group" aria-label="Basic example">
<!-- Add 2 buttons -->
<button class="btn btn-lg btn-dark mx-2" style="max-width: 40%" id="Nuevas_JH" value="Nuevas_JH">Fecha de anuncio</button>
<button class="btn btn-lg btn-dark mx-1" style="max-width: 40%" id="Nuevas_abiertos" value="Nuevas_abiertos">Fecha de deceso</button>
<script src="{{ "/assets/javascript/grafica_comparativo_muertes.js" | relative_url }}"></script>
</div>
</div>
<div class="alert alert-dismissible alert-info" style="margin-top:5%;">
<!--h4 class="alert-heading" style="text-transform:none;">Acerca de nuestras proyecciones</h4-->
<p class="mb-0"> Los puntos lilas corresponden al número de defunciones reportadas día por día por las autoridades.
Los puntos naranjas representan el número de defunciones por la fecha de deceso.
La información análoga es mostrada en la gráfica inferior. En ese caso presentamos también la media móvil de 7 días.
Para saber más sobre la diferencia entre la información en lila y la información en naranja, por favor lee
<a href="/posts/los-datos-abiertos.html" class="alert-link" style="color:#FF8654 !important;">esto</a> o dirígite
<a href="/datos_abiertos.html" class="alert-link" style="color:#FF8654 !important;">aquí.</a>
</p>
</div>
<div class="justfy-content-center" id="barplot_comparativo_muertes">
<h1 class="text-center" style='margin-top: 5%; text-transform: none;'>Defunciones diarias</h1>
<p id="tiempo_actualizacion_4"> </p>
<div class="btn-block justify-content-center" role="group" aria-label="Basic example">
<!-- Add 2 buttons -->
<button class="btn btn-lg btn-dark mx-2" style="max-width: 40%" onclick="update2('Nuevas_JH')">Fecha de anuncio</button>
<button class="btn btn-lg btn-dark mx-1" style="max-width: 40%" onclick="update2('Nuevas_abiertos')">Fecha de deceso</button>
</div>
<script src="{{ "/assets/javascript/barplot_comparativo_muertes_nuevas.js" | relative_url }}"></script>
</div>
<div class="alert alert-dismissible alert-info" style="margin-top:5%;">
<!--h4 class="alert-heading" style="text-transform:none;">Acerca de nuestras proyecciones</h4-->
<p class="mb-0"> El área naranja representa las defunciones diarias por fecha de deceso.
En el área sombreada, el número de registros puede cambiar drásticamente de un día a otro,
ya que esta se actualizará con aquellas pruebas pendientes cuyos resultados todavía no han sido presentados por el gobierno.
Para saber más, puedes leer nuestra sección de
<a href="datos_abiertos.html" class="alert-link" style="color:#FF8654 !important;">datos abiertos.</a>
</p>
</div>
<div class="justify-content-center" id="pir"><h1 class="text-center" style='margin-top: 5%; text-transform: none;'>Defunciones por edad y sexo</h1><p id="tiempo_actualizacion_5"> </p></div>
</div>
<!--INICIA EL POBLACIONAL-->
<script>
var urlPyr = "https://raw.githubusercontent.com/mexicovid19/Mexico-datos/master/datos/demograficos_variables/defunciones_sexo_edad.json";
d3.json(urlPyr, function(data) {
var options = {
height: 400,
width: 600,
style: {
leftBarColor: "mediumorchid",
rightBarColor: "navy"
}
};
pyramidBuilder(data, '#pir', options);
});
</script>
<form method="get" action="https://github.com/LeonardoCastro/COVID19-Mexico/archive/master/data/series_tiempo.zip">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-info" >Descarga los datos</button>
</form>
</section>
{%- if site.posts.size > 0 -%}
<p class="h4">{{ page.list_title | default: "Posts" }}</p>
<ul class="list-unstyled">
{%- for post in site.posts -%}
<li>
<span class="text-muted">
{%- assign date_format = "%b %-d, %Y" -%}
{{ post.date | date: date_format }}
</span>
<p class="h5">
<a href="{{ post.url | relative_url }}">
{{ post.title | escape }}
</a>
</p>
{%- if site.show_excerpts -%}
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
{%- endif -%}
</article>