-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcovid.html
153 lines (138 loc) · 6.69 KB
/
covid.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>COVID-19</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script src = "https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="intro.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Monkeypox</a>
</li>
<!--<li class="nav-item">
<a class="nav-link" href="idk.html">News</a>
</li>-->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="covid.html">COVID-19</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
<rssapp-ticker id="xBJF3L1OPRjx2QZ3"></rssapp-ticker><script src="https://widget.rss.app/v1/ticker.js" type="text/javascript" async></script>
<div class="chartCard">
<div class="chartBox2">
<center><h1 class="display-1">COVID-19</h1></center>
</div>
</div>
<div class="chartCard">
<div class="chartBox2">
<iframe src="https://ourworldindata.org/explorers/coronavirus-data-explorer?zoomToSelection=true&time=2020-03-01..latest&facet=none&pickerSort=desc&pickerMetric=new_cases_per_million&Metric=Confirmed+cases&Interval=7-day+rolling+average&Relative+to+Population=true&Color+by+test+positivity=false&country=IND~USA~GBR~CAN~DEU~JPN&hideControls=true" loading="lazy" style="width: 100%; height: 600px; border: 0px none;"></iframe>
</div>
</div>
<div class="chartCard">
<div class="chartBox2">
<canvas id = "chart" width="300" height="200"></canvas>
</div>
</div>
<script>
chartItCovid();
async function chartItCovid() {
const data = await getCovidData();
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.statelabel ,
datasets: [
{
label: 'Total Covid Cases in the United States',
data: data.totalcase,
backgroundColor:'rgba(158, 42, 43)',
borderWidth: 1
}]
},
});
}
getCovidData();
async function getCovidData() {
const statelabel = [];
const totalcase = [];
const response = await fetch('covid.csv');
const data = await response.text();
const rows = data.split('\n').slice(1);
rows.forEach(elt => {
const columns = elt.split(",");
const state = columns[1];
statelabel.push(state);
const cases = columns[2];
totalcase.push(cases);
//parseFloat : turn str into #
console.log(state, cases);
});
return{statelabel, totalcase};
//returning an obj with x and y
}
</script>
<center><div class="chartCard">
<div class="chartBox2">
<h1 class="display-1">What is the Coronavirus?</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/D9tTi-CDjDU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div></center>
<div class="chartCard">
<div class="chartBox2">
<center><h2 class="display-2">How to Avoid the Coronavirus</h2></center>
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start list-group-item-danger">
<div class="ms-2 me-auto">
<div class="fw-bold">To help protect yourself and others from COVID-19:</div>
<ul>
<li>Get vaccinated and stay up to date on your COVID-19 vaccines.</li>
<li>Everyone ages 2 years and older should properly wear a well-fitting mask indoors in public in areas where the COVID-19 Community Level is high, regardless of vaccination status.</li>
<li>Avoid poorly ventilated spaces and crowds.</li>
<li>Test to prevent spread to others.</li>
<li>Wash your hands often. If soap and water are not readily available, use a hand sanitizer that contains at least 60% alcohol.</li>
<li>Cover coughs and sneezes.</li>
<li>Clean high touch surfaces regularly or as needed and after you have visitors in your home. If someone is sick or has tested positive for COVID-19, disinfect frequently touched surfaces.</li>
<li>Monitor your health daily.</li>
</ul>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Self care: If you have possible or confirmed COVID-19:</div>
<ul>
<li>Stay home except to get medical care.</li>
<li>Monitor your symptoms.</li>
<li>Get tested as soon as possible after your symptoms start.</li>
<li>Get rest and stay hydrated. Take over-the-counter medicines, such as acetaminophen, to help you feel better.</li>
<li>Call ahead before visiting your doctor.</li>
<li>If you are sick, wear a well-fitting mask.</li>
</ul>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
<center><div class="chartCard">
<div class="chartBox2">
<center><h2 class="display-2">3D Animation of COVID-19</h2></center>
<div class="sketchfab-embed-wrapper"> <iframe title="SARS-CoV-2 (COVID-19)" frameborder="0" width = "60%" height ="60%" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/1533d2519b084a1580ddba0d3c5a3aff/embed"> </iframe>
</div>
</div></center>
<div class="chartCard">
<div class="chartBox2">
<rssapp-imageboard id="xBJF3L1OPRjx2QZ3"></rssapp-imageboard><script src="https://widget.rss.app/v1/imageboard.js" type="text/javascript" async></script>
</div>
</div>
</body>
</html>