Skip to content

Instantly share code, notes, and snippets.

@angelialau

angelialau/index.html

Last active July 9, 2020 22:42
Show Gist options
  • Save angelialau/3f1dc332d7ecb08c20f2e5ca1edf9ad9 to your computer and use it in GitHub Desktop.
Save angelialau/3f1dc332d7ecb08c20f2e5ca1edf9ad9 to your computer and use it in GitHub Desktop.
Download ZIP
DV - HW3// source https://jsbin.com/necaqes
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>DV - HW3</title>
<script src="https://d3js.org/d3.v5.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">
.bar {
fill: SteelBlue;
stroke: Black;
}
#title {
font-size:20;
font-family:Sans-Serif;
}
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: 700px;
height: 700px;
}
#map {
width: 700px;
height: 400px;
float: left;
display: inline-block;
}
#chart {
width: 700px;
height: 300px;
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.eyJ1IjoiYjBiYXNhdXIiLCJhIjoiY2s5bTBnbXR6MDJzMTNlb3FlbGFiZ2E5MiJ9.iXECTY84sX8AsSEkVf-CuA';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10', // basemap
center:[-96,38.5],
zoom: 3,
});
map.on('load', function(){
map.addSource('statedata', {
type:'geojson',
data: 'https://gist.githubusercontent.com/angelialau/6706667911cb21b1a82d843ddb27f47f/raw/09a53ec330022adcc9fad60474ad06f551479678/stateData.geojson',
promoteId: 'name',
});
map.addLayer({
'id': 'new_case_colors',
'source': 'statedata',
'type': 'fill',
'paint': {
'fill-outline-color': '#444',
'fill-opacity': 0.8, // transparent at the start
'fill-color': 'rgba(0,0,0,0)'
}
});
// add line plot
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(function(data) {
var us = data[0],
nys = data[1].filter(record => record.state=='New York'),
nyc = data[2].filter(record => record.county=='New York City');
// pivot table so that we get {date: [(state, new cases)]}
var daily_cases = {};
data[1].forEach((d,i) => {
if (!(d.date in daily_cases)){
daily_cases[d.date] = {};
}
daily_cases[d.date][d.state] = d.cases;
});
// generate traces
let datasets = [us, nys, nyc],
titles = ['US Cases', 'NYS Cases', 'NYC Cases'],
colors= ['#1f77b4', '#ff7f0e', '#2ca02c'],
traces = [];
datasets.forEach((dataset, dataset_i)=>{
traces.push({
x: dataset.map(d => d.date),
y: dataset.map(d => d.cases),
type:'line',
name: titles[dataset_i],
marker: {color:colors[dataset_i]}
});
});
let layout = {
title: 'Covid-19 Cases in NYC vs. NYS and US',
xaxis:{
title: 'Date',
ticks: 'outside',
nticks: 5,
mirror: true,
linewidth: 1,
},
yaxis: {
title: 'Number of Cases',
ticks: 'outside',
mirror: true,
linewidth: 1,
}
}
Plotly.newPlot('chart', traces, layout);
// on hover -> update map
chart.on('plotly_hover', event =>{
// calculate number of new cases
let index = event.points[0].pointNumber,
curr_date = data[0][index].date, // date we are concerned with
prev_date = data[0][index-1].date,
new_cases = {};
for (var state in daily_cases[curr_date]){
ytd_cases = daily_cases[prev_date][state] || 0;
new_cases[state] = daily_cases[curr_date][state] - ytd_cases;
}
// update map
updateStates(Object.entries(new_cases));
});
// color the states according to the number of new cases
function updateStates(state_cases){
state_cases.forEach(d => {
map.setFeatureState({
source: 'statedata',
id: d[0], // state name
}, {
count: d[1], // count of new cases
});
})
// generate expression for color map
let steps = 7,
maxV = d3.max(state_cases.map(d=>d[1])),
domain = d3.range(0, maxV, maxV/steps),
colors = d3.schemeBlues[steps],
filter = [];
domain.slice(1).forEach((v, k)=> {
filter.push(['<', ['feature-state', 'count'], v]);
filter.push(colors[k]);
});
filter.push(colors[colors.length-1]); // add in final color
filter = ['case', // filter by feature-state
['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)', // remove color for null data
...filter,
];
map.setPaintProperty('new_case_colors', 'fill-color', filter);
}
});
});
</script>
<script id="jsbin-source-css" type="text/css">.bar {
fill: SteelBlue;
stroke: Black;
}
#title {
font-size:20;
font-family:Sans-Serif;
}
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: 700px;
height: 700px;
}
#map {
width: 700px;
height: 400px;
float: left;
display: inline-block;
}
#chart {
width: 700px;
height: 300px;
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>
</body>
</html>
Raw
jsbin.necaqes.css
.bar {
fill: SteelBlue;
stroke: Black;
}
#title {
font-size:20;
font-family:Sans-Serif;
}
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: 700px;
height: 700px;
}
#map {
width: 700px;
height: 400px;
float: left;
display: inline-block;
}
#chart {
width: 700px;
height: 300px;
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.necaqes.js
mapboxgl.accessToken = 'pk.eyJ1IjoiYjBiYXNhdXIiLCJhIjoiY2s5bTBnbXR6MDJzMTNlb3FlbGFiZ2E5MiJ9.iXECTY84sX8AsSEkVf-CuA';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10', // basemap
center:[-96,38.5],
zoom: 3,
});
map.on('load', function(){
map.addSource('statedata', {
type:'geojson',
data: 'https://gist.githubusercontent.com/angelialau/6706667911cb21b1a82d843ddb27f47f/raw/09a53ec330022adcc9fad60474ad06f551479678/stateData.geojson',
promoteId: 'name',
});
map.addLayer({
'id': 'new_case_colors',
'source': 'statedata',
'type': 'fill',
'paint': {
'fill-outline-color': '#444',
'fill-opacity': 0.8, // transparent at the start
'fill-color': 'rgba(0,0,0,0)'
}
});
// add line plot
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(function(data) {
var us = data[0],
nys = data[1].filter(record => record.state=='New York'),
nyc = data[2].filter(record => record.county=='New York City');
// pivot table so that we get {date: [(state, new cases)]}
var daily_cases = {};
data[1].forEach((d,i) => {
if (!(d.date in daily_cases)){
daily_cases[d.date] = {};
}
daily_cases[d.date][d.state] = d.cases;
});
// generate traces
let datasets = [us, nys, nyc],
titles = ['US Cases', 'NYS Cases', 'NYC Cases'],
colors= ['#1f77b4', '#ff7f0e', '#2ca02c'],
traces = [];
datasets.forEach((dataset, dataset_i)=>{
traces.push({
x: dataset.map(d => d.date),
y: dataset.map(d => d.cases),
type:'line',
name: titles[dataset_i],
marker: {color:colors[dataset_i]}
});
});
let layout = {
title: 'Covid-19 Cases in NYC vs. NYS and US',
xaxis:{
title: 'Date',
ticks: 'outside',
nticks: 5,
mirror: true,
linewidth: 1,
},
yaxis: {
title: 'Number of Cases',
ticks: 'outside',
mirror: true,
linewidth: 1,
}
}
Plotly.newPlot('chart', traces, layout);
// on hover -> update map
chart.on('plotly_hover', event =>{
// calculate number of new cases
let index = event.points[0].pointNumber,
curr_date = data[0][index].date, // date we are concerned with
prev_date = data[0][index-1].date,
new_cases = {};
for (var state in daily_cases[curr_date]){
ytd_cases = daily_cases[prev_date][state] || 0;
new_cases[state] = daily_cases[curr_date][state] - ytd_cases;
}
// update map
updateStates(Object.entries(new_cases));
});
// color the states according to the number of new cases
function updateStates(state_cases){
state_cases.forEach(d => {
map.setFeatureState({
source: 'statedata',
id: d[0], // state name
}, {
count: d[1], // count of new cases
});
})
// generate expression for color map
let steps = 7,
maxV = d3.max(state_cases.map(d=>d[1])),
domain = d3.range(0, maxV, maxV/steps),
colors = d3.schemeBlues[steps],
filter = [];
domain.slice(1).forEach((v, k)=> {
filter.push(['<', ['feature-state', 'count'], v]);
filter.push(colors[k]);
});
filter.push(colors[colors.length-1]); // add in final color
filter = ['case', // filter by feature-state
['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)', // remove color for null data
...filter,
];
map.setPaintProperty('new_case_colors', 'fill-color', filter);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment