Skip to content

Commit

Permalink
Exposes US County Data
Browse files Browse the repository at this point in the history 
This adds a US Counties option which then exposes an additional drop down
menu for selecting a US State. County level data is pulled from the
John Hopkins CSSE data set and displayed for the selected State.
  • Loading branch information
@bdarfler
bdarfler committed Apr 23, 2020
1 parent 356756a commit 55fd4d8
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 27 deletions.
6 changes: 6 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,12 @@ <h2>Customize</h2>
</option>
</select>

<select v-model="selectedState" @mousedown="pause" v-if="selectedRegion == 'US Counties'">
<option v-for="s in states" v-bind:value="s">
{{ s }}
</option>
</select>

<select v-model="selectedScale" @mousedown="pause">
<option v-for="s in scale" v-bind:value="s">
{{ s }}
Expand Down
110 changes: 83 additions & 27 deletions vue-definitions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ let app = new Vue({
el: '#root',

mounted() {
this.pullData(this.selectedData, this.selectedRegion);
this.pullData(this.selectedData, this.selectedRegion, this.selectedState);
},

created: function() {
Expand Down Expand Up @@ -175,6 +175,13 @@ let app = new Vue({
}
}

if (urlParameters.has('state')) {
let myState = urlParameters.get('state');
if (this.states.includes(myState)) {
this.selectedState = myState;
}
}

// since this rename came later, use the old name to not break existing URLs
let renames = {
'China': 'China (Mainland)'
Expand Down Expand Up @@ -214,14 +221,21 @@ let app = new Vue({
watch: {
selectedData() {
if (!this.firstLoad) {
this.pullData(this.selectedData, this.selectedRegion, /*updateSelectedCountries*/ false);
this.pullData(this.selectedData, this.selectedRegion, this.selectedState, /*updateSelectedCountries*/ false);
}
this.searchField = '';
},

selectedRegion() {
if (!this.firstLoad) {
this.pullData(this.selectedData, this.selectedRegion, /*updateSelectedCountries*/ true);
this.pullData(this.selectedData, this.selectedRegion, this.selectedState, /*updateSelectedCountries*/ true);
}
this.searchField = '';
},

selectedState() {
if (!this.firstLoad) {
this.pullData(this.selectedData, this.selectedRegion, this.selectedState, /*updateSelectedCountries*/ true);
}
this.searchField = '';
},
Expand Down Expand Up @@ -284,28 +298,33 @@ let app = new Vue({
return Math.min.apply(Math, par);
},

pullData(selectedData, selectedRegion, updateSelectedCountries = true) {

if (selectedRegion != 'US') {
let url;
pullData(selectedData, selectedRegion, selectedState, updateSelectedCountries = true) {
// Construct URL
let url;
if (selectedRegion.startsWith('US')) { // Use US Data
if (selectedData == 'Confirmed Cases') {
url = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv';
url = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_US.csv';
} else if (selectedData == 'Reported Deaths') {
url = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv';
} else {
return;
url = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_US.csv';
}
Plotly.d3.csv(url, (data) => this.processData(data, selectedRegion, updateSelectedCountries));
} else { // selectedRegion == 'US'
let url;
} else { // Use Global Data
if (selectedData == 'Confirmed Cases') {
url = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_US.csv';
url = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv';
} else if (selectedData == 'Reported Deaths') {
url = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_US.csv';
} else {
return;
url = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv';
}
}

// Pull Data
if (url) {
switch (this.selectedRegion) {
case 'US States':
return Plotly.d3.csv(url, (data) => this.processData(this.preprocessUSStateData(data), selectedRegion, selectedState, updateSelectedCountries));
case 'US Counties':
return Plotly.d3.csv(url, (data) => this.processData(this.preprocessUSCountyData(data, selectedState), selectedRegion, selectedState, updateSelectedCountries));
default:
return Plotly.d3.csv(url, (data) => this.processData(data, selectedRegion, selectedState, updateSelectedCountries));
}
Plotly.d3.csv(url, (data) => this.processData(this.preprocessUSData(data), selectedRegion, updateSelectedCountries));
}
},

Expand Down Expand Up @@ -350,7 +369,7 @@ let app = new Vue({
.map(e => Object.assign({}, e, {region: e['Province/State']}));
},

processData(data, selectedRegion, updateSelectedCountries) {
processData(data, selectedRegion, selectedState, updateSelectedCountries) {
let dates = Object.keys(data[0]).slice(4);
this.dates = dates;
this.day = this.dates.length;
Expand All @@ -370,12 +389,16 @@ let app = new Vue({
}
}

} else if (selectedRegion == 'US States') {
grouped = this.filterByCountry(data, dates, 'US');
} else if (selectedRegion == 'US Counties') {
grouped = this.filterByCountry(data, dates, selectedState);
} else {
grouped = this.filterByCountry(data, dates, selectedRegion)
.filter(e => !regionsToPullToCountryLevel.includes(e.region)); // also filter our Hong Kong and Macau as subregions of Mainland China
}

let exclusions = ['Cruise Ship', 'Diamond Princess', 'Grand Princess'];
let exclusions = ['Cruise Ship', 'Diamond Princess', 'Grand Princess', 'Unassigned'];

let renames = {
'Taiwan*': 'Taiwan',
Expand Down Expand Up @@ -429,19 +452,36 @@ let app = new Vue({

},

preprocessUSData(data) {
preprocessUSCountyData(data, selectedState) {
let result = {};
data.filter(r => r.Province_State == selectedState).forEach(record => {
let state = record.Province_State
let county = record.Admin2
let temp = (result[county] || {'Province/State': county, 'Country/Region': state, 'Lat': null, 'Long': null})
Object.keys(record).forEach(key => {
// if they key starts with a digit we assume it is a date
if (/^\d/.test(key)) {
temp[key] = parseInt(record[key])
}
});
result[county] = temp
});
return Object.values(result);
},

preprocessUSStateData(data) {
let result = {};
data.forEach(record => {
let region = record.Province_State
let temp = (result[region] || {'Province/State': region, 'Country/Region': 'US', 'Lat': null, 'Long': null})
let state = record.Province_State
let temp = (result[state] || {'Province/State': state, 'Country/Region': 'US', 'Lat': null, 'Long': null})
Object.keys(record).forEach(key => {
// if they key starts with a digit we assume it is a date
if (/^\d/.test(key)) {
// each record is a county so we sum them up to get the state wide total
temp[key] = (temp[key] || 0) + parseInt(record[key])
}
});
result[region] = temp
result[state] = temp
});
return Object.values(result);
},
Expand Down Expand Up @@ -531,6 +571,10 @@ let app = new Vue({
queryUrl.append('region', this.selectedRegion);
}

if (this.selectedRegion == 'US Counties' && this.selectedState != 'Alabama') {
queryUrl.append('state', this.selectedState);
}

// since this rename came later, use the old name for URLs to avoid breaking existing URLs
let renames = {
'China (Mainland)': 'China'
Expand Down Expand Up @@ -601,8 +645,10 @@ let app = new Vue({
case 'World':
return 'Countries';
case 'Australia':
case 'US':
case 'US States':
return 'States and Territories';
case 'US Counties':
return 'Counties';
case 'China':
return 'Provinces';
case 'Canada':
Expand Down Expand Up @@ -745,10 +791,20 @@ let app = new Vue({

selectedData: 'Confirmed Cases',

regions: ['World', 'US', 'China', 'Australia', 'Canada'],
regions: ['World', 'US States', 'US Counties', 'China', 'Australia', 'Canada'],

selectedRegion: 'World',

states: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
'District of Columbia', 'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa',
'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
'New York', 'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon',
'Pennsylvania', 'Puerto Rico', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas',
'Utah', 'Vermont', 'Virgin Islands', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'],

selectedState: 'Alabama',

sliderSelected: false,

day: 7,
Expand Down

0 comments on commit 55fd4d8

Please sign in to comment.