Published
Edited
Oct 8, 2020
1 star
md`# Assignment 6: GeoVisualization`
md`Bruce G. Miller
October 5, 2020
`
md`Process file to add state short abbreviation
`
stateNameToPostal = d3.json("https://worldpopulationreview.com/static/states/name-abbr.json")
{
const rows = CovidRows;
const unpack = (rows, key) => rows.map(function(row) { return row[key]; })
var data = [{
type: 'choropleth',
locationmode: 'USA-states',
locations: unpack(rows, 'state').map(state=>stateNameToPostal[state]),
z: unpack(rows, 'cases'),
text: unpack(rows, 'state'),
autocolorscale: true
}];
var layout = {
title: 'Covid-19 Cases by State as of Oct 4',
geo:{
scope: 'usa'
}
};
const myDiv = DOM.element("div")
Plotly.newPlot(myDiv, data, layout, {showLink: false});
return myDiv
}
{
const rows = CovidRows;
const unpack = (rows, key) => rows.map(function(row) { return row[key]; })
var data = [{
type: 'choropleth',
locationmode: 'USA-states',
locations: unpack(rows, 'state').map(state=>stateNameToPostal[state]),
z: unpack(rows, 'deaths'),
text: unpack(rows, 'state'),
autocolorscale: true
}];
var layout = {
title: 'Covid-19 Deaths by State as of Oct 4',
geo:{
scope: 'usa'
}
};
const myDiv = DOM.element("div")
Plotly.newPlot(myDiv, data, layout, {showLink: false});
return myDiv
}
{
const rows = populationRows;
const unpack = (rows, key) => rows.map(function(row) { return row[key]; })
var data = [{
type: 'choropleth',
locationmode: 'USA-states',
locations: unpack(rows, 'Postal'),
z: unpack(rows, 'Population'),
text: unpack(rows, 'State'),
autocolorscale: true
}];
var layout = {
title: '2014 US Popultaion by State',
geo:{
scope: 'usa'
}
};
const myDiv = DOM.element("div")
Plotly.newPlot(myDiv, data, layout, {showLink: false});
return myDiv
}
md`# Bubble Maps
`
{
const rows = CovidRows;
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var stateName = unpack(rows, 'state'),
stateDeaths = unpack(rows, 'deaths'),
// cityLat = unpack(rows, 'lat'),
// cityLon = unpack(rows, 'lon'),
color = [,"rgb(255,65,54)","rgb(133,20,75)","rgb(255,133,27)","lightgrey"],
stateSize = [],
hoverText = [],
scale = 1000;
for ( var i = 0 ; i < stateDeaths.length; i++) {
var currentSize = stateDeaths[i] / scale;
var currentText = stateName[i] + " deaths: " + stateDeaths[i];
stateSize.push(currentSize);
hoverText.push(currentText);
}
var data = [{
type: 'scattergeo',
// mode: 'markers',
locationmode: 'USA-states',
locations: unpack(rows, 'state').map(state=>stateNameToPostal[state]),
// text: unpack(rows, 'state'),
// lat: cityLat,
// lon: cityLon,
hoverinfo: 'text',
text: hoverText,
marker: {
// size: 'stateDeaths',
size: stateSize,
line: {
color: 'black',
width: 2
},
}
}];
var layout = {
title: 'Covid 19 Deaths',
showlegend: false,
geo: {
scope: 'usa',
projection: {
type: 'albers usa'
},
},
height: 500,
width: 900,
};
const myDiv = DOM.element("div")
Plotly.newPlot(myDiv, data, layout, {showLink: false});
return myDiv
}
{
const rows = CovidRows;
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var stateName = unpack(rows, 'state'),
stateCases = unpack(rows, 'cases'),
// cityLat = unpack(rows, 'lat'),
// cityLon = unpack(rows, 'lon'),
color = [,"rgb(255,65,54)","rgb(133,20,75)","rgb(255,133,27)","lightgrey"],
stateSize = [],
hoverText = [],
scale = 10000;
for ( var i = 0 ; i < stateCases.length; i++) {
var currentSize = stateCases[i] / scale;
var currentText = stateName[i] + " cases: " + stateCases[i];
stateSize.push(currentSize);
hoverText.push(currentText);
}
var data = [{
type: 'scattergeo',
// mode: 'markers',
locationmode: 'USA-states',
locations: unpack(rows, 'state').map(state=>stateNameToPostal[state]),
// text: unpack(rows, 'state'),
// lat: cityLat,
// lon: cityLon,
hoverinfo: 'text',
text: hoverText,
marker: {
// size: 'stateDeaths',
size: stateSize,
line: {
color: 'black',
width: 2
},
}
}];
var layout = {
title: 'Covid 19 Cases',
showlegend: false,
geo: {
scope: 'usa',
projection: {
type: 'albers usa'
},
},
height: 500,
width: 900,
};
const myDiv = DOM.element("div")
Plotly.newPlot(myDiv, data, layout, {showLink: false});
return myDiv
}
{
const rows = CityPopulationRows;
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var cityName = unpack(rows, 'name'),
cityPop = unpack(rows, 'pop'),
cityLat = unpack(rows, 'lat'),
cityLon = unpack(rows, 'lon'),
color = [,"rgb(255,65,54)","rgb(133,20,75)","rgb(255,133,27)","lightgrey"],
citySize = [],
hoverText = [],
scale = 50000;
for ( var i = 0 ; i < cityPop.length; i++) {
var currentSize = cityPop[i] / scale;
var currentText = cityName[i] + " pop: " + cityPop[i];
citySize.push(currentSize);
hoverText.push(currentText);
}
var data = [{
type: 'scattergeo',
locationmode: 'USA-states',
lat: cityLat,
lon: cityLon,
hoverinfo: 'text',
text: hoverText,
marker: {
size: citySize,
line: {
color: 'black',
width: 2
},
}
}];
var layout = {
title: '2014 US City Populations',
showlegend: false,
geo: {
scope: 'usa',
projection: {
type: 'albers usa'
},
},
height: 500,
width: 900,
};
const myDiv = DOM.element("div")
Plotly.newPlot(myDiv, data, layout, {showLink: false});
return myDiv
}
md`## Databases
`
CovidRows = d3.csv('https://raw.githubusercontent.com/nytimes/covid-19-data/master/live/us-states.csv',d3.autotype);
CovidRows2 = d3.csv('https://covidtracking.com/data/download/all-states-history.csv',d3.autotype);
StateAbbrev = d3.csv('https://raw.githubusercontent.com/jasonong/List-of-US-States/master/states.csv',d3.autoType)
EarthquateRows = d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/earthquakes-23k.csv',d3.autoType);
populationRows = d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv', d3.autoType);
CityPopulationRows = d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_us_cities.csv', d3.autoType)
md`## Required resources for visualization
`
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
