Skip to content

Instantly share code, notes, and snippets.

@pg1647

pg1647/index.html

Created June 22, 2020 00:43
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/9262323fa82d323555d3c4ac281f9ea8 to your computer and use it in GitHub Desktop.
Save pg1647/9262323fa82d323555d3c4ac281f9ea8 to your computer and use it in GitHub Desktop.
Download ZIP
Data Vis. Summer 2020 || HW2 - Covid-19 Cases in NYC vs. NYS and US // source https://jsbin.com/genafo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Data Vis. Summer 2020 || HW2 - Covid-19 Cases in NYC vs. NYS and US</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id="chart"></div>
<script id="jsbin-javascript">
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, row.deaths]),
data[1].filter(row => (row.state == 'New York'))
.map(row => [row.date, row.cases, row.deaths]),
data[2].filter(row => (row.county == 'New York City'))
.map(row => [row.date, row.cases, row.deaths])];
console.log(data[0][0]); // first rwo of first file
console.log(data[1][0]); // first row of second file
console.log(data[2][0]); // first row of third file
console.log(outdata[0][0]); // first rwo of first file
console.log(outdata[1][0]); // first row of second file
console.log(outdata[2][0]);
createPlot(outdata);
});
function createPlot(data) {
// us_cases = data[0].map(d => d[1])
// console.log(us_cases);
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 us_deaths = {
x: data[0].map(d => d[0]),
y: data[0].map(d => d[2]),
name: 'US Deaths',
mode: 'lines',
line: {
color: '#1f77b4',
dash: 'dot',
}
};
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 nys_deaths = {
x: data[1].map(d => d[0]),
y: data[1].map(d => d[2]),
name: 'NYS Deaths',
mode: 'lines',
line: {
color: '#ff7f0e',
dash: 'dot',
}
};
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',
}
};
var nyc_deaths = {
x: data[2].map(d => d[0]),
y: data[2].map(d => d[2]),
name: 'NYC Deaths',
mode: 'lines',
line: {
color: '#2ca02c',
dash: 'dot',
}
};
traces = [us_cases, us_deaths,
nys_cases, nys_deaths,
nyc_cases, nyc_deaths];
let layout = {
width: 700,
height: 500,
title: "Covid-19 Cases in NYC vs. NYS and US",
xaxis: {
title: "Date",
// range: [0, 30],
nticks: 5,
ticks: "outside",
mirror: true,
linewidth: 1,
},
yaxis: {
title: "Number of Cases",
// range: [0, 30],
nticks: 7,
ticks: "outisde",
mirror: true,
linewidth: 1,
},
};
Plotly.newPlot('chart', traces, layout);
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">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, row.deaths]),
data[1].filter(row => (row.state == 'New York'))
.map(row => [row.date, row.cases, row.deaths]),
data[2].filter(row => (row.county == 'New York City'))
.map(row => [row.date, row.cases, row.deaths])];
console.log(data[0][0]); // first rwo of first file
console.log(data[1][0]); // first row of second file
console.log(data[2][0]); // first row of third file
console.log(outdata[0][0]); // first rwo of first file
console.log(outdata[1][0]); // first row of second file
console.log(outdata[2][0]);
createPlot(outdata);
});
function createPlot(data) {
// us_cases = data[0].map(d => d[1])
// console.log(us_cases);
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 us_deaths = {
x: data[0].map(d => d[0]),
y: data[0].map(d => d[2]),
name: 'US Deaths',
mode: 'lines',
line: {
color: '#1f77b4',
dash: 'dot',
}
};
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 nys_deaths = {
x: data[1].map(d => d[0]),
y: data[1].map(d => d[2]),
name: 'NYS Deaths',
mode: 'lines',
line: {
color: '#ff7f0e',
dash: 'dot',
}
};
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',
}
};
var nyc_deaths = {
x: data[2].map(d => d[0]),
y: data[2].map(d => d[2]),
name: 'NYC Deaths',
mode: 'lines',
line: {
color: '#2ca02c',
dash: 'dot',
}
};
traces = [us_cases, us_deaths,
nys_cases, nys_deaths,
nyc_cases, nyc_deaths];
let layout = {
width: 700,
height: 500,
title: "Covid-19 Cases in NYC vs. NYS and US",
xaxis: {
title: "Date",
// range: [0, 30],
nticks: 5,
ticks: "outside",
mirror: true,
linewidth: 1,
},
yaxis: {
title: "Number of Cases",
// range: [0, 30],
nticks: 7,
ticks: "outisde",
mirror: true,
linewidth: 1,
},
};
Plotly.newPlot('chart', traces, layout);
}</script></body>
</html>
Raw
jsbin.genafo.js
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, row.deaths]),
data[1].filter(row => (row.state == 'New York'))
.map(row => [row.date, row.cases, row.deaths]),
data[2].filter(row => (row.county == 'New York City'))
.map(row => [row.date, row.cases, row.deaths])];
console.log(data[0][0]); // first rwo of first file
console.log(data[1][0]); // first row of second file
console.log(data[2][0]); // first row of third file
console.log(outdata[0][0]); // first rwo of first file
console.log(outdata[1][0]); // first row of second file
console.log(outdata[2][0]);
createPlot(outdata);
});
function createPlot(data) {
// us_cases = data[0].map(d => d[1])
// console.log(us_cases);
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 us_deaths = {
x: data[0].map(d => d[0]),
y: data[0].map(d => d[2]),
name: 'US Deaths',
mode: 'lines',
line: {
color: '#1f77b4',
dash: 'dot',
}
};
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 nys_deaths = {
x: data[1].map(d => d[0]),
y: data[1].map(d => d[2]),
name: 'NYS Deaths',
mode: 'lines',
line: {
color: '#ff7f0e',
dash: 'dot',
}
};
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',
}
};
var nyc_deaths = {
x: data[2].map(d => d[0]),
y: data[2].map(d => d[2]),
name: 'NYC Deaths',
mode: 'lines',
line: {
color: '#2ca02c',
dash: 'dot',
}
};
traces = [us_cases, us_deaths,
nys_cases, nys_deaths,
nyc_cases, nyc_deaths];
let layout = {
width: 700,
height: 500,
title: "Covid-19 Cases in NYC vs. NYS and US",
xaxis: {
title: "Date",
// range: [0, 30],
nticks: 5,
ticks: "outside",
mirror: true,
linewidth: 1,
},
yaxis: {
title: "Number of Cases",
// range: [0, 30],
nticks: 7,
ticks: "outisde",
mirror: true,
linewidth: 1,
},
};
Plotly.newPlot('chart', traces, layout);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment