forked from cronopista/areweflatteningthecurve
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (122 loc) · 7.81 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
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
<!doctype html>
<html>
<head>
<title>Are we flattening the curve? Data updated twice daily.</title>
<meta name="description"
content="Projection of the coronavirus pandemic based on current trends. We update this page daily." />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="lib/vue.js"></script>
<script src="lib/Chart.js"></script>
<script src="lib/chartjs-plugin-annotation.js"></script>
<link href="styles.css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="title">
<h1>Are we <a href="https://www.livescience.com/coronavirus-flatten-the-curve.html" target="_blank">flattening
the curve?</a></h1>
</div>
<div id="mainApp">
<div id="regionButtons">
<div class="regionButton " v-on:click="changeRegion('USA')"
v-bind:class="{ regionButtonInactive: activeRegion != 'USA' }">USA</div>
<div class="regionButton " v-on:click="changeRegion('Italy')"
v-bind:class="{ regionButtonInactive: activeRegion != 'Italy' }">Italy</div>
<div class="regionButton " v-on:click="changeRegion('Spain')"
v-bind:class="{ regionButtonInactive: activeRegion != 'Spain' }">Spain</div>
<div class="regionButton " v-on:click="changeRegion('Germany')"
v-bind:class="{ regionButtonInactive: activeRegion != 'Germany' }">Germany</div>
<div class="regionButton " v-on:click="changeRegion('UK')"
v-bind:class="{ regionButtonInactive: activeRegion != 'UK' }">UK</div>
<div class="regionButton " v-on:click="changeRegion('India')"
v-bind:class="{ regionButtonInactive: activeRegion != 'India' }">India</div>
<div class="regionButton " v-on:click="changeRegion('Portugal')"
v-bind:class="{ regionButtonInactive: activeRegion != 'Portugal' }">Portugal</div>
<div class="regionButton " v-on:click="changeRegion('New York')"
v-bind:class="{ regionButtonInactive: activeRegion != 'New York' }">New York</div>
<div class="regionButton " v-on:click="changeRegion('California')"
v-bind:class="{ regionButtonInactive: activeRegion != 'California' }">California</div>
<div class="regionButton " v-on:click="changeRegion('Minnesota')"
v-bind:class="{ regionButtonInactive: activeRegion != 'Minnesota' }">Minnesota</div>
</div>
<p>
<h2 class="weAre" v-bind:class="{ weAreNot: region.areWe == 'No' }">{{region.areWe}}.</h2>
</p>
<p v-if="region.areWe == 'Yes' ">
Our projection is better than it was 5 days ago, but further efforts need to be done.
At the current contagion rate, we <a href="#methodology">could overwhelm the health care system</a> by <b>{{region.healthCareLimitDate.toLocaleDateString("en-US", {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'})}}</b>.
</p>
<p v-if="region.areWe == 'No' ">
Our projection is worse than it was 5 days ago. Further efforts need to be done.
At the current contagion rate, we <a href="#methodology">could overwhelm the health care system</a> by <b>{{region.healthCareLimitDate.toLocaleDateString("en-US", {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'})}}</b>.
</p>
<p class="disclaimer">
<b>Disclaimer</b>: obviously these dates and figures are ballpark estimates based on very imperfect data.
</p>
<div id="chartButtons">
<div class="chartButton " v-on:click="bigPicture" v-bind:class="{ chartButtonInactive: !bigPictureActive }">
Complete picture</div>
<div class="chartButton " v-on:click="nearFuture" v-bind:class="{ chartButtonInactive: bigPictureActive }">
Near future</div>
</div>
<div id="chartParent" >
<canvas id="growthChart" ></canvas>
</div>
<p class="note">
Trends change daily based on the efforts made by goverments
and citizens. You can see the evolution of the trend by comparing the current projection with the projection
from 5 days ago and the one from {{region.labels[region.fixComparition]}}, when there were {{region.totals[region.fixComparition].toLocaleString()}}
active cases.<br/>
Data updated twice daily.
</p>
<h2 id="methodology">Methodology</h2>
<p>
<b>Health care system capacity</b>. It is estimated that <a
href="https://www.nytimes.com/2020/03/22/opinion/health/ventilator-shortage-coronavirus-solution.html"
target="_blank">{{(ventilatorRate*10000/100).toLocaleString()}}% of cases require ventilators</a>.
We are defining the capacity of the health care system by the number of available ventilators.
We currently have <b v-html="region.ventilatorsSituation"></b>. When we reach
<b>{{region.healthCareLimitCalculated.toLocaleString()}}</b> active cases, we will need
<b>{{(Math.round(region.healthCareLimitCalculated*ventilatorRate)).toLocaleString()}} </b>.
It may be noted that a big percentage of ventilators are normally in use for other types of patients,
so the health care system might actually be overwhelmed much sooner.
</p>
<p>
<b>Projection of active cases</b>. We take the average increase of the last {{daysForTrend}} days and
project it into the future until we reach the point
where {{(totalInfectionEstimate*10000/100).toLocaleString()}}% of the population has been infected
(estimates for total infection vary from <a
href="https://www.washingtonpost.com/health/coronavirus-forecasts-are-grim-its-going-to-get-worse/2020/03/11/2a177e0a-63b4-11ea-acca-80c22bbee96f_story.html"
target="_blank">
40% to 80%</a>).
We linearly decrease the growth rate as more people get infected, and subtract the cases that
are more than <a
href="https://www.who.int/docs/default-source/coronaviruse/who-china-joint-mission-on-covid-19-final-report.pdf"
target="_blank">{{recoveryDays}} days</a> old (average recovery time).
</p>
<p>
<b>Fatalities</b>. This is even more guesswork than the rest,
<a href="https://ourworldindata.org/coronavirus#what-do-we-know-about-the-risk-of-dying-from-covid-19"
target="_blank">given the uncertainty</a>.
We are currently calculating based on a case fatality rate of
{{(fatalityRateOptimal*10000/100).toLocaleString()}}% before crisis point and
{{(fatalityRateSuboptimal*10000/100).toLocaleString()}}% after.
</p>
<p>
We will adjust all these numbers over time.
</p>
<h2>Issues/suggestions</h2>
<p>
You can open an issue in the <a href="https://github.com/cronopista/areweflatteningthecurve/issues"
target="_blank">Github site</a> for this page
if you think that the methodology can be improved or the data is incorrect.
</p>
<p>
If you would like to see your region, you can also get in touch through <a
href="https://github.com/cronopista/areweflatteningthecurve/" target="_blank">Github</a>
or even grab the code and start your own site.
</p>
</div>
<script src="data.js"></script>
<script src="app.js"></script>
</body>
</html>