Football fanatic who loves diving into the data.
Published
Edited
Mar 9, 2021
md`# CAP 6737 - Assignment 07`
md`## Import Data`
d3 = require("d3@6", "d3-regression@1.3.4")
Plotly = require("plotly.js-dist")
import { radio, select, slider } from "@jashkenas/inputs"
import { soFetch } from '@alecglassford/so-fetch'
md`## Load Data`
covidData = d3.csvParse(
await (await soFetch(
"https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/owid-covid-data.csv"
)).text(),
d3.autotype
)
dates = [...new Set(covidData.map(d => d.date))].sort()
viewof viewBy = radio({
title: "View By: ",
options: [
{label: "Total Cases", value: "total_cases"},
{label: "Total Deaths", value: "total_deaths"}
],
value: "total_cases",
})
viewof dateSlider = slider({
min: 0,
max: dates.length-1,
step: 1,
value: 0,
format: i => `${dates[i]}`,
title: "Date",
description: "Choose Date"
})
selectedDate = dates[dateSlider]
covidDataFiltered = covidData.filter(d => !d['iso_code'].includes('OWID'))
{
const myDiv = html`<div/>`;
const filter_and_unpack = (key, year) =>
covidDataFiltered.filter(row => row['date'] == selectedDate).map(row => row[key]);
const locations = filter_and_unpack('iso_code', selectedDate);
const data = [
{
type: 'choropleth',
z: filter_and_unpack(viewBy, selectedDate),
locations: locations,
text: locations,
locationmode: 'world'
}
];
var layout = {
title: viewBy + `<br>${selectedDate}`,
showlegend: false,
geo: {
scope: 'world',
showland: true,
landcolor: 'rgb(217, 217, 217)',
showlakes: true,
lakecolor: 'rgb(128, 128, 255)'
}
};
Plotly.newPlot(myDiv, data, { ...layout, ...mapLayout }, { showLink: false });
return myDiv;
}
{
const myDiv = html`<div/>`;
const filter_and_unpack = (key, year) =>
covidDataFiltered.filter(row => row['date'] == selectedDate).map(row => row[key]);
const casesOrDeaths = filter_and_unpack(viewBy, selectedDate)
const covidScale = d3
.scaleSqrt()
.domain(d3.extent(casesOrDeaths))
.range([4, 10]);
const covidSize = casesOrDeaths.map(d => covidScale(d))
const locations = filter_and_unpack('iso_code', selectedDate);
const hoverText = casesOrDeaths;
const data = [
{
type: 'scattergeo',
z: casesOrDeaths,
locations: locations,
hoverinfo:'text',
text: hoverText,
locationmode: 'world',
marker: {
size: covidSize, //Size specified the diameter
line: {
color: "lightgrey",
width: 1
}
}
}
];
var layout = {
title: viewBy + `<br>${selectedDate}`,
showlegend: false,
geo: {
scope: 'world',
showland: true,
landcolor: 'rgb(217, 217, 217)',
showlakes: true,
lakecolor: 'rgb(128, 128, 255)'
}
};
Plotly.newPlot(myDiv, data, { ...layout, ...mapLayout }, { showLink: false });
return myDiv;
}
unpack = (rows, key)=> rows.map(row => row[key])
mapLayout = ({
autosize: false,
width: 900,
height: 500,
margin: {
l: 20,
r: 50,
b: 20,
t: 50,
pad: 4
},
paper_bgcolor: '#AAAAAA',
plot_bgcolor: '#8888c7'
})
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.
