Skip to content

Commit 15648f5

Browse files
wadefagenwadefagen
committed
April 10 update
1 parent c952a38 commit 15648f5

20 files changed

+8102
-506
lines changed

‎LICENSE

+674
Large diffs are not rendered by default.

‎_layouts/bare.html

+2
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-67232409-3');</script>
2929
</head>
3030
<body>
31+
<div>
3132
{{content}}
33+
</div>
3234
</body>
3335
</html>

‎_layouts/project.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
layout: bare
3+
---
4+
5+
<header class="container-fluid header-small">
6+
<div class="container">
7+
<h1>
8+
<a href="/">91-DIVOC</a>
9+
</h1>
10+
</div>
11+
</header>
12+
13+
<div class="container-fluid viz" style="border-bottom: dashed 1px hsla(199, 100%, 6%, 1); margin-bottom: 20px;">
14+
<div class="container lead">
15+
<h2>{{page.title}}</h2>
16+
{{page.desc}}
17+
</div>
18+
</div>
19+
20+
<div class="container">
21+
{{content}}
22+
</div>
23+
24+
<footer class="container-fluid">
25+
<div class="container" style="text-align: right;">
26+
<div style="color: #ddd;">&ndash; wade</div>
27+
<div style="font-size: 12px;">
28+
<a href="https://waf.cs.illinois.edu">Website</a> |
29+
<a href="https://www.instagram.com/profwade/">Instagram</a> |
30+
<a href="https://www.twitter.com/profwade_/">Twitter</a> |
31+
<a href="https://www.github.com/wadefagen/">GitHub</a>
32+
</div>
33+
</div>
34+
</footer>
35+
36+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
37+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
38+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

‎index.md

+80-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,86 @@
11
---
2-
# Feel free to add content and custom Front Matter to this file.
3-
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
4-
52
layout: home
63
---
74

8-
<h3>#01 - COVID-19 Dataset</h3>
5+
<h3>Projects</h3>
6+
7+
<ul>
8+
<li>
9+
#02: <a href="pages/covid-by-your-locations/">COVID-19 Data for Locations of People You Love</a>
10+
</li>
11+
<li>
12+
#01: <a href="pages/covid-visualization/">An interactive visualization of the exponential spread of COVID-19</a>
13+
</li>
14+
</ul>
15+
16+
<hr>
17+
18+
<h3>#02 - Local Storage - April 5, 2020</h3>
19+
20+
<p>
21+
A lot of people had amazing suggestions on the COVID-19 visualization and I implemented many of them to make the visualization as useful to as
22+
many people as possible. One specific suggestion -- to allow the visualization to "remember" you previous choice -- was added with a quick bit
23+
of code to use a cookie to remember your previously selected county and state.
24+
</p>
25+
26+
<p>
27+
Even though this feature was added nearly two weeks ago, I was never entirely happy with it. Specifically, when a cookie is used, all of the
28+
data stored in the cookie is sent to the server every time a page is loaded. For this site, that is absolutely not needed -- the highlighting
29+
of a selected country on the COVID-19 visualization is done inside of your web browser and not by the server. I was certain there was a way
30+
to do this better: <i>How can I store user settings without needing to send the data to the server?</i>
31+
</p>
32+
33+
<p>
34+
The goal of my second 91-DIVOC project was to explore the storage options available for "remembering" user preferences without a database.
35+
I found that every modern browser supports three ways:
36+
</p>
37+
38+
<ul>
39+
<li>
40+
<b>Cookies</b>: Stores up to 4,096 bytes, accessible via JavaScript, and sent to the server along with every request (as part of the HTTP header).
41+
</li>
42+
<li>
43+
<b>Web Storage</b>: Stores up to ~5 MB, accessible via JavaScript, and <b>not sent</b> to the server. Two sub-types:
44+
<ul>
45+
<li>
46+
<code>sessionStorage</code>, stores data for the current session but <b>lost when the browser is closed</b>
47+
</li>
48+
<li>
49+
<code>localStorage </code>, stores data with no expiration date and <b>persists when the browser is closed</b>
50+
</li>
51+
</ul>
52+
</li>
53+
</ul>
54+
55+
<p>
56+
So <code>localStorage</code> is the winner -- a large amount of data can be stored, the data is private (never sent to the server), and
57+
persists for a long time. But how can I build something to explore this technology?
58+
</p>
59+
60+
<p>
61+
Reflecting on the past week, I found myself caring less and less on the depressing global statistics and focusing more on the cases and
62+
deaths in the communities where I have people I love. The University of Illinois is located in Champaign County, Illinois and, as April 5, 2020,
63+
the cases have started to explode -- 400% growth, from 11 to 55 cases, all in the past week.
64+
</p>
65+
66+
<p>
67+
My second project was to create a COVID-19 tool that shows <b>only</b> the data from the locations that means the most to you:
68+
</p>
69+
70+
<div class="card">
71+
<a href="pages/covid-by-your-locations/">COVID-19 Data for Locations of People You Love &gt;&gt;</a>
72+
</div>
73+
74+
<p>
75+
If you have never created something that has had user preferences saved locally -- not without a database or other infrastructure -- this
76+
was <b>surprisingly easy</b>. It's worth getting it a shot and I hope you go start creating! :)
77+
</p>
78+
79+
80+
<hr>
81+
82+
83+
<h3>#01 - COVID-19 Dataset - March 21, 2020</h3>
984

1085
<p>
1186
One thing that has impressed me the most is the vast amount of high-quality, organized data around COVID-19. One of the leaders
@@ -59,5 +134,5 @@ layout: home
59134
<p>
60135
I hope you will download the dataset and play with it! The dataset opens in Excel, in Google Sheets, and is easily readable using Python and
61136
JavaScript -- it is data that is impacting this world more than anything else right now and you have access to it! I would love to see
62-
and share what you create, be sure to use <b>#91-divoc</b> and <b>#91-divoc-01</b>. Go start creating! :)
137+
and share what you create, be sure to use <b>#91divoc</b>. Go start creating! :)
63138
</p>

‎pages/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.env

‎pages/covid-by-your-locations/css.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
i {
2+
color: #aaa;
3+
}
4+
5+
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
6+
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
7+
.autocomplete-selected { background: #F0F0F0; }
8+
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
9+
.autocomplete-group { padding: 2px 5px; }
10+
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

‎pages/covid-by-your-locations/img.png

35.1 KB
Loading

‎pages/covid-by-your-locations/index.html

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
layout: bare
3+
4+
social-img: https://91-divoc.com/pages/covid-by-your-locations/img.png
5+
title: A project to display COVID-19 data only for the locations that matter most to you. Updated daily.
6+
---
7+
8+
<div class="content-wrapper">
9+
<header class="container-fluid header-small">
10+
<div class="container">
11+
<h1>
12+
<a href="/">91-DIVOC</a>
13+
</h1>
14+
</div>
15+
</header>
16+
17+
<link rel="stylesheet" href="css.css">
18+
19+
<div class="container-fluid viz" style="border-bottom: dashed 1px hsla(199, 100%, 6%, 1);">
20+
<div class="container lead">
21+
<h2>COVID-19 Data for Locations of People You Love</h2>
22+
A project to display COVID-19 data only for the locations that matter most to you. Updated daily.
23+
</div>
24+
</div>
25+
26+
27+
<div class="container viz">
28+
<div class="alert alert-secondary" style="margin-top: 10px; padding-top: 20px;">
29+
There is a lot of COVID-19 data out there. Increasingly, I have been focused on the locations where I have family and close friends.
30+
<ul>
31+
<li>Displays COVID-19 data for <b>only the locations you select</b>.</li>
32+
<li>This pages <b>remembers your locations</b> when you come back (using local storage, your locations are never sent to the server).</li>
33+
</ul>
34+
35+
This is <b>updated daily</b> with the Johns Hopkins CSSE data, which is typically released around 7:00pm Central.
36+
<i id="jhu-updated"></i>
37+
</div>
38+
39+
<div>
40+
<table class="table table-striped">
41+
<thead>
42+
<tr>
43+
<th>Location</th>
44+
<th>Confirmed Cases</th>
45+
<th>Total Deaths</th>
46+
</tr>
47+
</thead>
48+
49+
<tbody id="datatable">
50+
</tbody>
51+
52+
<thead>
53+
<tr>
54+
<th colspan="3" style="background-color: hsla(199, 100%, 94%, 1);">
55+
<div>Add New Location:</div>
56+
<div class="btn-group" style="width: 100%; max-width: 600px;">
57+
<div class="input-group-prepend">
58+
<span class="input-group-text"><b>County</b>:</span>
59+
</div>
60+
<input type="text" class="form-control" id="addLocation">
61+
</div>
62+
<div style="font-weight: normal; font-size: 12px; margin-left: 3px;">Most data is divided by <b>counties</b> (not cities), so try the <b>county name</b> of the locations that matter most to you.</div>
63+
</th>
64+
</tr>
65+
</thead>
66+
67+
</table>
68+
</div>
69+
70+
<hr>
71+
72+
<div class="container-fluid">
73+
<div class="container lead" style="padding: 0px;">
74+
<div><b>Global and State-level Visualization</b>: <a href="../covid-visualization/">91-DIVOC #01: An interactive visualization of the exponential spread of COVID-19</a></div>
75+
<div><b>More Details</b>: <a href="/">91-DIVOC #02 - Local Storage</a></div>
76+
<div><b>COVID-19 Dataset</b>: <a href="https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_time_series" target="_blank">2019 Novel Coronavirus COVID-19 (2019-nCoV) Data Repository by Johns Hopkins CSSE</a></div>
77+
</div>
78+
</div>
79+
80+
<noscript>
81+
<style>.social-hide { display: none; }</style>
82+
<img class="social-hide" itemprop="image" src="img.png">
83+
</noscript>
84+
85+
</div>
86+
87+
<footer class="container-fluid">
88+
<div class="container">
89+
<div class="row">
90+
<div class="col-3">
91+
<br>
92+
<div style="font-size: 12px;">
93+
<a href="https://creativecommons.org/licenses/by-sa/4.0/">(CC) BY-SA 4.0</a>
94+
</div>
95+
</div>
96+
<div class="col-9" style="text-align: right;">
97+
<div style="color: #ddd;">&ndash; wade</div>
98+
<div style="font-size: 12px;">
99+
<a href="https://waf.cs.illinois.edu">Website</a> |
100+
<a href="https://www.instagram.com/profwade/">Instagram</a> |
101+
<a href="https://www.twitter.com/profwade_/">Twitter</a> |
102+
<a href="https://www.github.com/wadefagen/">GitHub</a>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
</footer>
108+
</div>
109+
110+
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
111+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
112+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
113+
114+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>
115+
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
116+
117+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.4.10/jquery.autocomplete.min.js"></script>
118+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.9/jquery.csv.min.js"></script>
119+
120+
<script src="../jhu-updated.js"></script>
121+
<script src="js.js"></script>
122+
123+
<!--
124+
<script src="https://d3js.org/d3.v5.min.js"></script>
125+
<script src="d3-tip.js"></script>
126+
-->

0 commit comments

Comments
 (0)