Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example of including county data #46

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Example of including county data #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
16d7e8e
Re-order for future changes; no functional change
sbonds Apr 2, 2020
b720b8d
Re-name for future changes; no functional change
sbonds Apr 2, 2020
7c87fad
Produces a county/region plot. For New York State...
sbonds Apr 2, 2020
904f055
Hardcoding is for beginners. Which I am!
sbonds Apr 2, 2020
bd9836d
Reduce the minimum to 10 since counties have fewer cases in general.
sbonds Apr 2, 2020
b80cee8
Take the blame for the horrible hacked-up Oregon-specific version.
sbonds Apr 2, 2020
8afc3d2
Make Oregon the default for my hacked-up version
sbonds Apr 3, 2020
94c21c3
Use "counties" as the name for the region so it makes more sense
sbonds Apr 3, 2020
b0c3092
Prep to include combo of state/county as the selectable item
sbonds Apr 3, 2020
63a8986
Now includes all state/county combinations
sbonds Apr 3, 2020
f23097a
Change labels to make the US Counties make more sense
sbonds Apr 3, 2020
d3c894b
Fix name collision leading to bad data displayed
sbonds Apr 3, 2020
dd67e95
Allow creation of sharable links using the sbonds hosting URL
sbonds Apr 3, 2020
05bccac
No longer only Oregon
sbonds Apr 3, 2020
e7216da
Google tag for viewing stats on site viewers
sbonds Apr 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 55 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>Covid Trends</title>

Expand All @@ -11,50 +12,71 @@
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162764858-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', 'UA-162764858-1');
</script>

</head>

<body>

<div id="root">

<div id="header">

<div id="explainer">
<p>This interactive charts the <b><i>new</i></b> {{selectedData.toLowerCase()}} of COVID-19 in the past week vs. the <b><i>total</i></b> {{selectedData.toLowerCase()}} to date. When plotted in this way, exponential growth is represented as a straight line that slopes upwards. Notice that almost all countries follow a very similar path of exponential growth. <i>We're all in this together.</i> <span v-if="isHidden"><a @click="toggleHide">Learn more.</a></span></p>
<div id="explainer">
<p>This interactive charts the <b><i>new</i></b> {{selectedData.toLowerCase()}} of COVID-19 in the past week vs.
the <b><i>total</i></b> {{selectedData.toLowerCase()}} to date. When plotted in this way, exponential growth
is represented as a straight line that slopes upwards. Notice that almost all countries follow a very similar
path of exponential growth. <i>We're all in this together.</i> <span v-if="isHidden"><a
@click="toggleHide">Learn more.</a></span></p>

<span v-if="!isHidden">
<span v-if="!isHidden">

<p>To learn more about this graph, watch this video created by Minute Physics.</p>
<br>
<p>To learn more about this graph, watch this video created by Minute Physics.</p>
<br>

<iframe width="560" height="315" src="https://www.youtube.com/embed/54XLXg4fYsc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/54XLXg4fYsc" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<p><i><b>Note:</b> The x-axis of this graph is not time</i>, but is instead the total number of cases or deaths.</p>
<p><i><b>Note:</b> The x-axis of this graph is not time</i>, but is instead the total number of cases or
deaths.</p>

<p><b>Tips:</b> Press Space (or the play button) to Play/Pause. Press +/- keys (or drag the slider) to see daily changes. Hover over the graph for more info. Drag your mouse to zoom in, doubleclick to zoom back out. And don't forget to wash your hands!</p>

<a id="hide" @click="toggleHide">Hide</a>
</span>
</div>
<p><b>Tips:</b> Press Space (or the play button) to Play/Pause. Press +/- keys (or drag the slider) to see
daily changes. Hover over the graph for more info. Drag your mouse to zoom in, doubleclick to zoom back out.
And don't forget to wash your hands!</p>

<div id="logowrapper">
<a id="hide" @click="toggleHide">Hide</a>
</span>
</div>

<h1><a href="https://aatishb.com/covidtrends">Covid Trends</a></h1>
<div id="logowrapper">

<div v-if="!isHidden" id="logos">
<a href="https://aatishb.com/"><img src="logos/aatishb-bw.png" height="40"></img></a>
<a href="https://www.youtube.com/user/minutephysics"><img src="logos/minutephysics-invert.png" height="40"></img></a>
</div>
<h1><a href="https://aatishb.com/covidtrends">Covid Trends</a></h1>

<div v-if="!isHidden" id="logos">
<a href="https://aatishb.com/"><img src="logos/aatishb-bw.png" height="40"></img></a>
<a href="https://www.youtube.com/user/minutephysics"><img src="logos/minutephysics-invert.png"
height="40"></img></a>
</div>

</div>

</div>

<div id="content">

<div id="left-column">

<graph v-if="covidData.length > 0" :data="filteredCovidData" :dates="dates" :day.sync="day" :selected-data="selectedData" :selected-region="selectedRegion" :scale="selectedScale" :resize="isHidden" @graph-mounted="graphMounted = true"></graph>
<graph v-if="covidData.length > 0" :data="filteredCovidData" :dates="dates" :day.sync="day"
:selected-data="selectedData" :selected-region="selectedRegion" :scale="selectedScale" :resize="isHidden"
@graph-mounted="graphMounted = true"></graph>

<div v-if="covidData.length > 0" id="nav">

Expand All @@ -68,7 +90,8 @@ <h2>{{minDay > 0 ? dates[day - 1] : dates[dates.length - 1] }}</h2>
</div>

<div class="navelement" id="slidercontainer">
<input v-if="dates.length > 7" type="range" :min="minDay > 0 ? minDay : dates.length" :max="dates.length" step="1" v-model="day" id="slider" @mousedown="pause"></input>
<input v-if="dates.length > 7" type="range" :min="minDay > 0 ? minDay : dates.length" :max="dates.length"
step="1" v-model="day" id="slider" @mousedown="pause"></input>
</div>

<div class="navelement">
Expand All @@ -81,10 +104,18 @@ <h2>{{minDay > 0 ? dates[day - 1] : dates[dates.length - 1] }}</h2>

</div>

<div v-if="!firstLoad && covidData.length == 0" id="nodata"><span>Not enough data for these parameters.</span></div>
<div v-if="!firstLoad && covidData.length == 0" id="nodata"><span>Not enough data for these parameters.</span>
</div>

<div id="footer">
Created by <a href="https://aatishb.com/">Aatish Bhatia</a> in collaboration with <a href="https://www.youtube.com/user/minutephysics">Minute Physics</a> &middot; World data provided by <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins University</a> &middot; US state data provided by <a href="https://github.com/nytimes/covid-19-data">NYTimes</a> &middot; Shortcuts: +/- for daily changes, space to play/pause &middot; <a href="https://github.com/aatishb/covidtrends#credits">Credits & Source</a> &middot; <a href="https://www.cdc.gov/coronavirus/2019-ncov/prepare/prevention.html">Stay safe!</a>
Prototype County-specific additions added by Steve Bonds to a much better original product
created by <a href="https://aatishb.com/">Aatish Bhatia</a>
in collaboration with <a href="https://www.youtube.com/user/minutephysics">Minute Physics</a> &middot;
World data provided by <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins University</a>
&middot; US state data provided by <a href="https://github.com/nytimes/covid-19-data">NYTimes</a>
&middot; Shortcuts: +/- for daily changes, space to play/pause &middot;
<a href="https://github.com/aatishb/covidtrends#credits">Credits & Source</a>
&middot; <a href="https://www.cdc.gov/coronavirus/2019-ncov/prepare/prevention.html">Stay safe!</a>
</div>

</div>
Expand Down Expand Up @@ -137,7 +168,8 @@ <h2>{{regionType}}</h2>
<div>

<div id="buttonwrapper">
<button @click="createURL" @mousedown="pause">{{copied ? 'Link Copied to Clipboard!' : 'Create Shareable Link'}}</button>
<button @click="createURL"
@mousedown="pause">{{copied ? 'Link Copied to Clipboard!' : 'Create Shareable Link'}}</button>
</div>

</div>
Expand Down
Loading