corona/index.html at master · yleprince/corona · 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
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
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-130693761-3"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'UA-130693761-3');
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1" , charset="UTF-8">
    <meta property="og:title" content="Coronavirus statistics" />
    <meta property="article:author" content="Yrieix Leprince" />
    <meta property="og:description" content="Explore coronavirus evolution spreading country by country." />
    <meta name="description" content="Explore coronavirus evolution spreading country by country.">
    <meta property="og:locale" content="en_GB" />
    <meta property="og:site_name" content="yleprince.github.io" />
    <meta property="og:image"
        content="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/facebook/230/face-with-medical-mask_1f637.png" />

    <link rel="stylesheet" href="corona.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="icon"
        href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/facebook/230/face-with-medical-mask_1f637.png">
    <title>Coronavirus</title>
</head>

<body>
    <h1>Coronavirus statistics</h1>

    <p>This page displays up to date <a href="https://en.wikipedia.org/wiki/Coronavirus">covid-19</a> statistics.</p>
    <div id="userMessage"></div>
    <br>
    <div class="centerContainer">
        <button class="button_corona clickable" id="popButton">👥 population %</button>
    </div>
    <br>

    <h2>🌍 Worldwide</h2>
    <ul>
        <li>Total cases: <span class="number" id="total_cases">...</span></li>
        <li>Total recovered: <span class="number" id="total_recovered">...</span></li>
        <li>Total unresolved: <span class="number" id="total_unresolved">...</span></li>
        <li>Total deaths: <span class="number" id="total_deaths">...</span></li>
    </ul>
    <ul>
        <li>Total new cases today: <span class="number" id="total_new_cases_today">...</span></li>
        <li>Total new deaths today: <span class="number" id="total_new_deaths_today">...</span></li>
    </ul>
    <ul>
        <li>Total active cases: <span class="number" id="total_active_cases">...</span></li>
        <li>Total serious cases: <span class="number" id="total_serious_cases">...</span></li>
        <li>Total countries affected: <span class="number" id="total_affected_countries">...</span></li>
    </ul>

    <hr>

    <h2>😷 Evolution by country</h2>

    <div id="countries">
        <select class="clickable corona" id="countrySelector"></select>
        <p class="small grey" id="helpDel"></p>
        <div id="countrySelected"></div>
    </div>

    <br>
    <div class="centerContainer">
        <button class="button_corona clickable" id="logButton">📉 Log scale</button>
    </div>
    <br>

    <div class="controls">
        <select class="clickable corona" id="metricSelector">
            <option value="total_cases" selected>Total cases</option>
            <option value="total_deaths">Total deaths</option>
            <option value="total_recoveries">Total recoveries</option>
            <option value="new_daily_cases">New daily cases</option>
            <option value="new_daily_deaths">New daily deaths</option>
        </select>
        <label for="metricSelector">👈</label>
    </div>
    <div id="containerPlot">
        <div id="plot"></div>
    </div>

    <hr>

    <h2>📍 Statistics by country</h2>

    <div id="container">
        <div id="map"></div>
    </div>
    <p class="small grey">Select a country on the map 👆 to display data below 👇</p>
    <h3 id="country"></h3><span id="countryPopulation"></span>
    <ul>
        <li>Total cases: <span id="c_total_cases"></span></li>
        <li>Total recovered: <span id="c_total_recovered"></span></li>
        <li>Total unresolved: <span id="c_total_unresolved"></span></li>
        <li>Total deaths: <span id="c_total_deaths"></span></li>
    </ul>
    <ul>
        <li>Total new cases today: <span id="c_total_new_cases_today"></span></li>
        <li>Total new deaths today: <span id="c_total_new_deaths_today"></span></li>
    </ul>
    <ul>
        <li>Total active cases: <span id="c_total_active_cases"></span></li>
        <li>Total serious cases: <span id="c_total_serious_cases"></span></li>
    </ul>

    <hr>
    <br>
    <div class="centerContainer">
        <button class="button_corona clickable" id="linkButton"></button>
    </div>
    <br>
    <hr>

    <p lang="en" class="small">Version française <a href="/corona/fr">ici</a>.</p>
    <p class="small grey">This page has been designed to be as ♿ inclusive as possible. It is supported on most mobile
        and computer types, for color blind people.</p>
    <p class="small">Go back to my personal <a href="/">website</a>, or let's chat on <a
            href="https://www.linkedin.com/in/yrieixleprince/">LinkedIn</a> 👋</p>

    <p class="small grey">Data source: <a href="https://thevirustracker.com/">thevirustracker.com</a> - <span
            id="source"></span>
    </p>
    <script>
        const lang = 'en';
        let SOURCEDOWN = false;
        let getCountry;
        let getFlag;
        let getName;
        let getPop;
        const githubData = 'https://raw.githubusercontent.com/yleprince/data/master/coronavirus/'
        const API = () => SOURCEDOWN ? `${githubData}virustrackerexports/latest/`
            : 'https://api.thevirustracker.com/free-api?';
    </script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script type="text/javascript" src='src/link.js'></script>
    <script type="text/javascript" src='src/worldwide.js'></script>
    <script type="text/javascript" src='src/evolution.js'></script>
    <script type="text/javascript" src='src/map.js'></script>
    <script type="text/javascript" src='src/app.js'></script>
</body>

</html>