areweflatteningthecurve/index.html at master · cronopista/areweflatteningthecurve · GitHub

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
<!doctype html>
<html>

<head>
    <title>Are we flattening the curve? Data updated twice daily.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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>
    <script src="lib/jquery-3.5.0.min.js"></script>
    <script src="data.js"></script>
    <script src="calculator.js"></script>
    <script src="statecodes.js"></script>
    <script src="app.js"></script>
    <link href="styles.css" rel="stylesheet" media="screen" />


</head>

<body>
    <div class="title">

        <h1>Are we flattening the curve?</h1>
    </div>


    <div id="mainApp" v-cloak>
        <div id="regionSelectSection">
            <span class="selectText">Select a region:</span>
            <select v-model="activeRegion" v-on:change="changeRegion" class="regionSelection">
                <option v-for="(region, option) in regionData" v-bind:value="option">
                    {{ option }}
                </option>
            </select>

        </div>


        <div id="chartButtons">

            <div class="chartButton " v-on:click="nearFuture"
                v-bind:class="{ chartButtonInactive: activeChart != 'nearFuture' }">
                Near future</div>
            <div class="chartButton " v-on:click="dailyIncrease"
                v-bind:class="{ chartButtonInactive: activeChart != 'dailyIncrease' }">
                Daily</div>


        </div>
        <div id="chartParent">

            <canvas id="growthChart"></canvas>
        </div>


        <p class="disclaimer">
            Data updated 3 times daily from the
            <a href="https://github.com/pomber/covid19" target="_blank">Johns Hopkins CSSE repository</a> and
            the <a href="https://covidtracking.com/" target="_blank"> NYT repository </a>.
            Last day measured: {{region.lastDate}} .
        </p>


        <h2 id="methodology">Methodology</h2>


        <p>
            To calculate the projection, we take the average increase of the last {{daysForTrend}} days.
        </p>


    </div>


</body>

</html>