-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (168 loc) · 9.19 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!doctype html>
<html lang="en">
<head>
<!--Fonts-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Vejovis - Corona Tracking</title>
</head>
<h1></h1>
<!-- Body -->
<body>
<header>
<div class="container-fluid">
<div class="row blue mb-4 py-3">
<div class="col mb-3 py-3">
<img class="centra" src="Logos/Vejovis White Logo.png" alt="Vejovis Real-time Coronavirus Tracking">
</div>
</div>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row px-3">
<div class="col-lg-6 mb-3">
<h1 class="text-center blue py-3"> Summary <sup class="standard mouse" data-toggle="modal" data-target="#exampleModal"> ⓘ </sup> </h1>
<div class="table-responsive">
<table class="table text-center table-borderless bg-light-gray">
<thead>
<tr>
<th scope="col">US Deaths</th>
<th scope="col">CA Cases</th>
<th scope="col">Predicted CA Growth</th>
</tr>
</thead>
<tbody>
<tr>
<td>69,579</td>
<td>47,390</td>
<td>+1,351</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-light-gray p-4 mt-2">
<iframe width="630" height="430" frameborder="0" scrolling="no" src="https://plotly.com/~KevinMiao/38.embed"></iframe>
</div>
</div>
<div class="col-lg-3 mb-3 order-lg-first">
<h1 class="text-center blue py-3"> Sentiment </h1>
<div class="bg-light-gray p-5">
<div class="row">
<div class="col">
<p class='text-center'> Today's sentiment </p>
<p class="Good text-center"> - </p>
</div>
<div class="col">
<p class="tiny"> For our sentiment rating, we display the average daily sentiment of tweets related to Coronavirus.
<p></p>
<sup class="standard mouse" data-toggle="modal" data-target="#exampleModal1"> More Information </sup>
</div>
</div>
</div>
<h1 class="text-center blue mt-2 py-3"> Trending </h1>
<div class="bg-light-gray p-5">
<a class="twitter-timeline tw-align-center" data-lang="en" data-width="400" data-height="500" data-theme="dark" href="https://twitter.com/KJHMiao/lists/corona1?ref_src=twsrc%5Etfw"></a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<div class="col-lg-3 mb-3">
<h1 class="text-center blue py-3"> Corona Tips</h1>
<div class="bg-light-gray p-5" style="overflow-y: scroll; height:400px;">
<ul>
<li>Clean your hands often with soap and water for 20 seconds.</li><p>
<li>Avoid close contact with people who are sick.</li><p>
<li>Stay at home as much as possible.</li><p>
<li>Put distance between yourself and other people (at least 6 feet).</li><p>
<li>Cover your mouth and nose with a cloth face cover when around others.</li><p>
<li>Cover your cough or sneeze with a tissue, then throw the tissue in the trash.</li><p>
<li>Clean and disinfect frequently touched objects and surfaces daily.</li><p>
<li><a href="https://m.box.com/shared_item/https%3A%2F%2Fstanfordmedicine.box.com%2Fv%2Fcovid19-PPE-1-1">A Stanford study</a>
<p>found that leaving N-95 grade masks in a conventional oven at 158 degrees Farenheit for 30 minutes effectively sterilizes them, leaving them available for reuse.<p></li>
</ul>
</div>
<h1 class="text-center blue py-3 mt-2"> About Us</h1>
<div class="bg-light-gray p-5">
<div class="mx-auto">
<img src="Logos/DSSBerk.png" class="w-100 centra" id="dss-logo" alt="Berkeley Data Science Society">
</div>
<p>We're a group of students studying at the University of California, Berkeley interested in applying our data science and programming skills to study COVID-19. We hope that this dashboard can provide a centralized, realiable source of information regarding the virus.</p>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer mt-5 blue">
<div class="container text-light text-center">
Made with ❤️ by
<a href="https://www.linkedin.com/in/aniketmandalik" style="color:#00dcff">Aniket Mandalik, </a>
<a href="https://www.linkedin.com/in/jeremymui/" style="color:#00dcff">Jeremy Mui, </a>
<a href="https://www.linkedin.com/in/miaok/" style="color:#00dcff">Kevin Miao, </a>
<a href="https://www.linkedin.com/in/kevin-woo-a66747171" style="color:#00dcff">Kevin Woo, </a>
<a href="https://www.linkedin.com/in/leo-xiao-9b2043197" style="color:#00dcff">Leo Xiao, </a>
<a href="https://www.linkedin.com/in/mina-kim-4634a2163" style="color:#00dcff">Mina Kim, </a>
<a href="https://www.linkedin.com/in/pooja-eega" style="color:#00dcff">Pooja Eega, </a>
and
<a href="https://www.linkedin.com/in/murthy1999" style="color:#00dcff">Varun Murthy</a>
</div>
</div>
</footer>
<!-- Pop Up Screen -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Time-Series Modeling</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
At this moment, we only limited our analysis to Californian COVID-19 Prediction Cases.
In future, we will be expanding this to the U.S. cases and then to other countries in the world.
ARIMA is a time series modeling tool that stands for Autoregressive integrated moving average. The data for this model has been gratefully been shared by our colleagues at Johns Hopkins University.
(Source: https://github.com/CSSEGISandData)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up Screen 2 -->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Natural Language Processing: Sentiment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
For our analysis of the general sentiment, we pulled twitter data that were related to the Coronavirus, i.e. containing hashtags such as - but not limited to - #COVID-19, #CoronaVirus.
In order to create a sentiment score, we utilized NLP algorithms that include the VADER lexicon that maps words to different polarity scores. Generally positive scores are translated into a '+' and negative scores will show up on our website as a '-'.
Here below, you can find the historical sentiment from previous days:
<img width="400" align='center' src="sentiment.png"></img>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>