Skip to content

Instantly share code, notes, and snippets.

@pg1647

pg1647/index.html

Created July 13, 2020 04:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pg1647/45b41e4357ed841126ed07f2f1f10070 to your computer and use it in GitHub Desktop.
Save pg1647/45b41e4357ed841126ed07f2f1f10070 to your computer and use it in GitHub Desktop.
Download ZIP
Data Vis. Summer 2020 || HW3 - Mapbox + US, US States, NYC New Coronovirus Cases // source https://jsbin.com/fukemet
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Data Vis. Summer 2020 || HW3 - Mapbox + US, US States, NYC New Coronovirus Cases </title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />
<style id="jsbin-css">
body {
margin: 0;
padding: 0;
}
h2,
h3 {
margin: 10px;
font-size: 1.2em;
}
h3 {
font-size: 1em;
}
p {
font-size: 0.85em;
margin: 10px;
text-align: left;
}
/**
* Create a position for the map
* on the page */
#canvas {
width: 1000px;
height: 900px;
}
#chart {
width: 1000px;
height: 300px;
float: left;
display: inline-block;
}
#map {
width: 1000px;
height: 600px;
float: left;
display: inline-block;
}
/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}
#features {
top: 0;
height: 100px;
margin-top: 20px;
width: 250px;
}
#legend {
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
line-height: 18px;
height: 150px;
margin-bottom: 40px;
width: 100px;
}
.legend-key {
display: inline-block;
border-radius: 20%;
width: 10px;
height: 10px;
margin-right: 5px;
}
</style>
</head>
<body>
<div id='canvas'>
<div id='map'></div>
<div id='chart'></div>
</div>
<script id="jsbin-javascript">
mapboxgl.accessToken = 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10', //use a base map without any data
center: [-74,40.7],
zoom: 14,
});
map.on('load', function() {
map.addSource('statedata', {
type: 'geojson',
data: 'https://gist.githubusercontent.com/pg1647/d7c6a6ebe7d2b720a5ceac356ce27c64/raw/a11a620966123aa5670e4d3142a161d190ad73e6/stateData.geojson',
promoteId: 'name',
});
map.addLayer({
id: 'states',
source: 'statedata',
type: 'fill',
paint:{
'fill-opacity': 0,
'fill-outline-color': '#444',
// 'fill-color': '#007bff',
},
});
Promise.all([
d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us.csv"),
d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv"),
d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv")
]).then(data => {
let outdata = [data[0].map(row => [row.date, row.cases]),
data[1].filter(row => (row.state == 'New York'))
.map(row => [row.date, row.cases]),
data[2].filter(row => (row.county == 'New York City'))
.map(row => [row.date, row.cases]),
data[1]];
createPlot(outdata);
});
function createPlot(data) {
var us_cases = {
x: data[0].map(d => d[0]),
y: data[0].map(d => d[1]),
name: 'US Cases',
mode: 'lines',
line: {
color: '#1f77b4',
dash: 'solid',
}
};
var nys_cases = {
x: data[1].map(d => d[0]),
y: data[1].map(d => d[1]),
name: 'NYS Cases',
mode: 'lines',
line: {
color: '#ff7f0e',
dash: 'solid',
}
};
var nyc_cases = {
x: data[2].map(d => d[0]),
y: data[2].map(d => d[1]),
name: 'NYC Cases',
mode: 'lines',
line: {
color: '#2ca02c',
dash: 'solid',
}
};
traces = [us_cases, nys_cases, nyc_cases];
let layout = {
title: "Covid-19 Cases in NYC vs. NYS and US",
xaxis: {
title: "Date",
nticks: 5,
ticks: "outside",
mirror: true,
linewidth: 1,
},
yaxis: {
title: "Number of Cases",
nticks: 7,
ticks: "outisde",
mirror: true,
linewidth: 1,
},
};
Plotly.newPlot('chart', traces, layout);
var dup_states = data[3].map(d => d.state);
var uni_states = [...new Set(dup_states)];
// count = data[3].filter(row => row.state == "Washington" && row.date == "2020-01-21");
// console.log(count[0].cases);
chart.on('plotly_hover', event => {
// In order to change color, we need to update all
// item colors, and give the specific one a different color
let index = event.points[0].pointIndex, // index of the data element
s_currdate = data[0][index][0],
strtodate = d3.timeParse("%Y-%m-%d"),
oneDayMillis = 1000*60*60*24,
d_currdate = strtodate(s_currdate),
d_yesdate = new Date(d_currdate.getTime() - oneDayMillis),
s_yesdate = d_yesdate.toISOString().substring(0, 10),
statesCount1 = uni_states.map(statename => {
let curr_arr = data[3].filter(row => (row.state == statename) && (row.date == s_currdate));
if (!Array.isArray(curr_arr) || !curr_arr.length) {
// array does not exist, is not an array, or is empty
// ⇒ do not attempt to process array
curr_count = 0;
}
else {
curr_count = curr_arr[0].cases;
}
let yes_arr = data[3].filter(row => row.state == statename && row.date == s_yesdate);
if (!Array.isArray(yes_arr) || !yes_arr.length) {
// array does not exist, is not an array, or is empty
// ⇒ do not attempt to process array
yes_count = 0;
}
else {
yes_count = yes_arr[0].cases;
}
return [statename, curr_count-yes_count];
});
let statesCount = statesCount1.filter(row => row[1]!=0);
setStates(statesCount);
});
function setStates(statesCount) {
if (!Array.isArray(statesCount) || !statesCount.length) {
// array does not exist, is not an array, or is empty
// ⇒ do not attempt to process array
map.setPaintProperty('states', 'fill-opacity', 0);
return;
}
statesCount.forEach(d => {
map.setFeatureState({
source: 'statedata',
id: d[0],
}, {
count: d[1],
});
});
let steps = 7,
maxV = d3.max(statesCount.map(d => d[1])),
domain = d3.range(0, maxV, maxV/steps),
colors = d3.schemeBlues[steps],
filter = new Array();
domain.slice(1).forEach((v, k) => {
filter.push(['<', ['feature-state', 'count'], v]);
filter.push(colors[k]);
});
filter.push(colors[colors.length-1]);
filter = [
'case',
['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)',
...filter,
];
map.setPaintProperty('states', 'fill-color', filter);
map.setPaintProperty('states', 'fill-opacity', 0.8);
} //end of setStates
} // end of createPlotData
map.fitBounds([[-133.2421875, 16.972741], [-47.63671875, 52.696361]]);
}); // end of map.on
</script>
<script id="jsbin-source-css" type="text/css">body {
margin: 0;
padding: 0;
}
h2,
h3 {
margin: 10px;
font-size: 1.2em;
}
h3 {
font-size: 1em;
}
p {
font-size: 0.85em;
margin: 10px;
text-align: left;
}
/**
* Create a position for the map
* on the page */
#canvas {
width: 1000px;
height: 900px;
}
#chart {
width: 1000px;
height: 300px;
float: left;
display: inline-block;
}
#map {
width: 1000px;
height: 600px;
float: left;
display: inline-block;
}
/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}
#features {
top: 0;
height: 100px;
margin-top: 20px;
width: 250px;
}
#legend {
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
line-height: 18px;
height: 150px;
margin-bottom: 40px;
width: 100px;
}
.legend-key {
display: inline-block;
border-radius: 20%;
width: 10px;
height: 10px;
margin-right: 5px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">mapboxgl.accessToken = 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10', //use a base map without any data
center: [-74,40.7],
zoom: 14,
});
map.on('load', function() {
map.addSource('statedata', {
type: 'geojson',
data: 'https://gist.githubusercontent.com/pg1647/d7c6a6ebe7d2b720a5ceac356ce27c64/raw/a11a620966123aa5670e4d3142a161d190ad73e6/stateData.geojson',
promoteId: 'name',
});
map.addLayer({
id: 'states',
source: 'statedata',
type: 'fill',
paint:{
'fill-opacity': 0,
'fill-outline-color': '#444',
// 'fill-color': '#007bff',
},
});
Promise.all([
d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us.csv"),
d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv"),
d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv")
]).then(data => {
let outdata = [data[0].map(row => [row.date, row.cases]),
data[1].filter(row => (row.state == 'New York'))
.map(row => [row.date, row.cases]),
data[2].filter(row => (row.county == 'New York City'))
.map(row => [row.date, row.cases]),
data[1]];
createPlot(outdata);
});
function createPlot(data) {
var us_cases = {
x: data[0].map(d => d[0]),
y: data[0].map(d => d[1]),
name: 'US Cases',
mode: 'lines',
line: {
color: '#1f77b4',
dash: 'solid',
}
};
var nys_cases = {
x: data[1].map(d => d[0]),
y: data[1].map(d => d[1]),
name: 'NYS Cases',
mode: 'lines',
line: {
color: '#ff7f0e',
dash: 'solid',
}
};
var nyc_cases = {
x: data[2].map(d => d[0]),
y: data[2].map(d => d[1]),
name: 'NYC Cases',
mode: 'lines',
line: {
color: '#2ca02c',
dash: 'solid',
}
};
traces = [us_cases, nys_cases, nyc_cases];
let layout = {
title: "Covid-19 Cases in NYC vs. NYS and US",
xaxis: {
title: "Date",
nticks: 5,
ticks: "outside",
mirror: true,
linewidth: 1,
},
yaxis: {
title: "Number of Cases",
nticks: 7,
ticks: "outisde",
mirror: true,
linewidth: 1,
},
};
Plotly.newPlot('chart', traces, layout);
var dup_states = data[3].map(d => d.state);
var uni_states = [...new Set(dup_states)];
// count = data[3].filter(row => row.state == "Washington" && row.date == "2020-01-21");
// console.log(count[0].cases);
chart.on('plotly_hover', event => {
// In order to change color, we need to update all
// item colors, and give the specific one a different color
let index = event.points[0].pointIndex, // index of the data element
s_currdate = data[0][index][0],
strtodate = d3.timeParse("%Y-%m-%d"),
oneDayMillis = 1000*60*60*24,
d_currdate = strtodate(s_currdate),
d_yesdate = new Date(d_currdate.getTime() - oneDayMillis),
s_yesdate = d_yesdate.toISOString().substring(0, 10),
statesCount1 = uni_states.map(statename => {
let curr_arr = data[3].filter(row => (row.state == statename) && (row.date == s_currdate));
if (!Array.isArray(curr_arr) || !curr_arr.length) {
// array does not exist, is not an array, or is empty
// ⇒ do not attempt to process array
curr_count = 0;
}
else {
curr_count = curr_arr[0].cases;
}
let yes_arr = data[3].filter(row => row.state == statename && row.date == s_yesdate);
if (!Array.isArray(yes_arr) || !yes_arr.length) {
// array does not exist, is not an array, or is empty
// ⇒ do not attempt to process array
yes_count = 0;
}
else {
yes_count = yes_arr[0].cases;
}
return [statename, curr_count-yes_count];
});
let statesCount = statesCount1.filter(row => row[1]!=0);
setStates(statesCount);
});
function setStates(statesCount) {
if (!Array.isArray(statesCount) || !statesCount.length) {
// array does not exist, is not an array, or is empty
// ⇒ do not attempt to process array
map.setPaintProperty('states', 'fill-opacity', 0);
return;
}
statesCount.forEach(d => {
map.setFeatureState({
source: 'statedata',
id: d[0],
}, {
count: d[1],
});
});
let steps = 7,
maxV = d3.max(statesCount.map(d => d[1])),
domain = d3.range(0, maxV, maxV/steps),
colors = d3.schemeBlues[steps],
filter = new Array();
domain.slice(1).forEach((v, k) => {
filter.push(['<', ['feature-state', 'count'], v]);
filter.push(colors[k]);
});
filter.push(colors[colors.length-1]);
filter = [
'case',
['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)',
...filter,
];
map.setPaintProperty('states', 'fill-color', filter);
map.setPaintProperty('states', 'fill-opacity', 0.8);
} //end of setStates
} // end of createPlotData
map.fitBounds([[-133.2421875, 16.972741], [-47.63671875, 52.696361]]);
}); // end of map.on
</script></body>
</html>
Raw
jsbin.fukemet.css
body {
margin: 0;
padding: 0;
}
h2,
h3 {
margin: 10px;
font-size: 1.2em;
}
h3 {
font-size: 1em;
}
p {
font-size: 0.85em;
margin: 10px;
text-align: left;
}
/**
* Create a position for the map
* on the page */
#canvas {
width: 1000px;
height: 900px;
}
#chart {
width: 1000px;
height: 300px;
float: left;
display: inline-block;
}
#map {
width: 1000px;
height: 600px;
float: left;
display: inline-block;
}
/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}
#features {
top: 0;
height: 100px;
margin-top: 20px;
width: 250px;
}
#legend {
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
line-height: 18px;
height: 150px;
margin-bottom: 40px;
width: 100px;
}
.legend-key {
display: inline-block;
border-radius: 20%;
width: 10px;
height: 10px;
margin-right: 5px;
}
Raw
jsbin.fukemet.js
mapboxgl.accessToken = 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10', //use a base map without any data
center: [-74,40.7],
zoom: 14,
});
map.on('load', function() {
map.addSource('statedata', {
type: 'geojson',
data: 'https://gist.githubusercontent.com/pg1647/d7c6a6ebe7d2b720a5ceac356ce27c64/raw/a11a620966123aa5670e4d3142a161d190ad73e6/stateData.geojson',
promoteId: 'name',
});
map.addLayer({
id: 'states',
source: 'statedata',
type: 'fill',
paint:{
'fill-opacity': 0,
'fill-outline-color': '#444',
// 'fill-color': '#007bff',
},
});
Promise.all([
d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us.csv"),
d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv"),
d3.csv("https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv")
]).then(data => {
let outdata = [data[0].map(row => [row.date, row.cases]),
data[1].filter(row => (row.state == 'New York'))
.map(row => [row.date, row.cases]),
data[2].filter(row => (row.county == 'New York City'))
.map(row => [row.date, row.cases]),
data[1]];
createPlot(outdata);
});
function createPlot(data) {
var us_cases = {
x: data[0].map(d => d[0]),
y: data[0].map(d => d[1]),
name: 'US Cases',
mode: 'lines',
line: {
color: '#1f77b4',
dash: 'solid',
}
};
var nys_cases = {
x: data[1].map(d => d[0]),
y: data[1].map(d => d[1]),
name: 'NYS Cases',
mode: 'lines',
line: {
color: '#ff7f0e',
dash: 'solid',
}
};
var nyc_cases = {
x: data[2].map(d => d[0]),
y: data[2].map(d => d[1]),
name: 'NYC Cases',
mode: 'lines',
line: {
color: '#2ca02c',
dash: 'solid',
}
};
traces = [us_cases, nys_cases, nyc_cases];
let layout = {
title: "Covid-19 Cases in NYC vs. NYS and US",
xaxis: {
title: "Date",
nticks: 5,
ticks: "outside",
mirror: true,
linewidth: 1,
},
yaxis: {
title: "Number of Cases",
nticks: 7,
ticks: "outisde",
mirror: true,
linewidth: 1,
},
};
Plotly.newPlot('chart', traces, layout);
var dup_states = data[3].map(d => d.state);
var uni_states = [...new Set(dup_states)];
// count = data[3].filter(row => row.state == "Washington" && row.date == "2020-01-21");
// console.log(count[0].cases);
chart.on('plotly_hover', event => {
// In order to change color, we need to update all
// item colors, and give the specific one a different color
let index = event.points[0].pointIndex, // index of the data element
s_currdate = data[0][index][0],
strtodate = d3.timeParse("%Y-%m-%d"),
oneDayMillis = 1000*60*60*24,
d_currdate = strtodate(s_currdate),
d_yesdate = new Date(d_currdate.getTime() - oneDayMillis),
s_yesdate = d_yesdate.toISOString().substring(0, 10),
statesCount1 = uni_states.map(statename => {
let curr_arr = data[3].filter(row => (row.state == statename) && (row.date == s_currdate));
if (!Array.isArray(curr_arr) || !curr_arr.length) {
// array does not exist, is not an array, or is empty
// ⇒ do not attempt to process array
curr_count = 0;
}
else {
curr_count = curr_arr[0].cases;
}
let yes_arr = data[3].filter(row => row.state == statename && row.date == s_yesdate);
if (!Array.isArray(yes_arr) || !yes_arr.length) {
// array does not exist, is not an array, or is empty
// ⇒ do not attempt to process array
yes_count = 0;
}
else {
yes_count = yes_arr[0].cases;
}
return [statename, curr_count-yes_count];
});
let statesCount = statesCount1.filter(row => row[1]!=0);
setStates(statesCount);
});
function setStates(statesCount) {
if (!Array.isArray(statesCount) || !statesCount.length) {
// array does not exist, is not an array, or is empty
// ⇒ do not attempt to process array
map.setPaintProperty('states', 'fill-opacity', 0);
return;
}
statesCount.forEach(d => {
map.setFeatureState({
source: 'statedata',
id: d[0],
}, {
count: d[1],
});
});
let steps = 7,
maxV = d3.max(statesCount.map(d => d[1])),
domain = d3.range(0, maxV, maxV/steps),
colors = d3.schemeBlues[steps],
filter = new Array();
domain.slice(1).forEach((v, k) => {
filter.push(['<', ['feature-state', 'count'], v]);
filter.push(colors[k]);
});
filter.push(colors[colors.length-1]);
filter = [
'case',
['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)',
...filter,
];
map.setPaintProperty('states', 'fill-color', filter);
map.setPaintProperty('states', 'fill-opacity', 0.8);
} //end of setStates
} // end of createPlotData
map.fitBounds([[-133.2421875, 16.972741], [-47.63671875, 52.696361]]);
}); // end of map.on
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment