Created
July 13, 2020 04:28
-
-
Save pg1647/45b41e4357ed841126ed07f2f1f10070 to your computer and use it in GitHub Desktop.
Data Vis. Summer 2020 || HW3 - Mapbox + US, US States, NYC New Coronovirus Cases // source https://jsbin.com/fukemet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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