toc()
import {toc} from "@harrystevens/toc"
covid = d3.csvParse(await FileAttachment("VDH-COVID-19-PublicUseDataset-Cases.csv").text(), function(d) {
return {
date: d3.timeParse("%x")(d["Report Date"]),
fips: d.FIPS,
locality: d.Locality,
district: d["VDH Health District"],
cases: +d["Total Cases"],
hospitalizations: +d.Hospitalizations,
deaths: +d.Deaths
};
});
covid.sort(function (a, b) {
return a.date - b.date;
});
printTable(covid.slice(0,5))
printTable(covid.slice(-5))
hr_districts = new Set(["Western Tidewater", "Chesapeake", "Virginia Beach", "Norfolk", "Portsmouth", "Hampton", "Peninsula"])
hr_covid = covid.filter(d => hr_districts.has(d.district))
printTable(hr_covid.slice(0,5))
printTable(covid.slice(-5))
last_date = covid[covid.length-1].date
covid_totals = covid.filter(d => d.date >= last_date)
hr_totals = covid_totals.filter(d => hr_districts.has(d.district))
printTable(covid_totals.slice(0,5))
printTable(covid_totals.slice(-5))
printTable(hr_totals)
viewof chart_1 = vl.markPoint({size: 40})
.data(covid_totals)
.encode(
vl.x().fieldQ("cases").axis({grid: false, title: "Number of Cases", titleFontSize:"20", labelFontSize: "15", tickCount:15}).scale({"type": "log"}), // .timeUnit('utcmonthdate'),
vl.y().fieldQ("deaths").axis({grid: false,title: "Number of Deaths", titleFontSize:"20", labelFontSize: "15"}),
vl.tooltip([vl.fieldN("locality"), "cases", "deaths"]), //.fieldQ("cases")
vl.color( {"value": "teal"})
)
.title
.height(600)
.width(700)
.padding("80")
//.background("#f5f7ff")
.render()
viewof chart_2 = vl.markPoint({size:40})
.data(covid)
.transform(
vl.groupby('date')
.aggregate(vl.sum('cases').as('total_cases'), vl.sum('hospitalizations').as('total_hospitalizations') )
)
.encode(
vl.x().fieldQ("total_cases").axis({grid: false, title: "Total Number of Cases", titleFontSize:"20", labelFontSize: "15"}), // .timeUnit('utcmonthdate'),
vl.y().fieldQ("total_hospitalizations").axis({grid: false,title: "Total Number of Hospitalizations", titleFontSize:"20", labelFontSize: "15"}),
vl.tooltip([vl.fieldT("date"), "total_cases", "total_hospitalizations"]),
vl.color( {"value": "teal"})
)
.title(
{text:"Total Cases Vs. Hospitalizations in VA over Time", fontSize:"30"}
)
.height(600)
.width(700)
.padding("80")
.render()
/.?
viewof chart_4 = {
const hover = vl.selectSingle("hover")
.on("mouseover")
.encodings("x")
.nearest(true)
.clear("moouseout");
const marks = vl.layer(
vl.markLine(),
vl.markPoint()
.transform(vl.filter(hover))
).encode(
vl.y().fieldQ("total_cases").axis({grid: false, title: "Total Cases", titleFontSize:"12", labelFontSize: "12"}),
vl.color({"legend": {title: "District"}}).fieldN("district")
);
const rules =vl.markRule({ strokeWidth: 0, tooltip: true })
.transform(vl.pivot("district").value("total_cases").groupby(["date"]))
.encode(
vl.opacity().value(0).if(hover, vl.value(0.7)),
vl.tooltip([vl.fieldT("date"), "Chesapeake", "Hampton", "Norfolk", "Peninsula", "Portsmouth", "Virginia Beach","Western Tidewater"])
)
.select(hover);
return vl
.layer(marks, rules )
.encode(vl.x().fieldT("date").axis({grid: false, title: "Date", titleFontSize:"12", labelFontSize: "12", labelAngle: "90"})
)
.data(hr_covid)
.transform(vl.groupby('date','district').aggregate(vl.sum('cases').as('total_cases')))
.title(
{text:"Total Cases over Time for Western Tidewater, Chesapeake, Virginia Beach, Norfolk, Portsmouth, Hampton, Peninsula Health Districts", fontSize:"14.5", offset: "20"}
)
.width(650)
.height(600)
.padding("10")
.render();
}
viewof chart_5 = vl.markLine({tooltip: {"content": "data"}, size:3})
.data(hr_covid)
.transform(
vl.groupby('date','district').aggregate(vl.sum('cases').as('total_cases'))
)
.encode(
vl.column({"header": {labelFontSize: 12}}).fieldN("district").title(null),
vl.x().fieldT("date").axis({grid: false, title: "Date", titleFontSize:"12", labelFontSize: "12", labelAngle: "90"}),
vl.y().fieldQ("total_cases").axis({grid: false, title: "Total Cases", titleFontSize:"12", labelFontSize: "12"}),
vl.color( {"value": "teal"})
)
.width(85)
.title(
{text:"Total Cases over Time for Western Tidewater, Chesapeake, Virginia Beach, Norfolk, Portsmouth, Hampton, Peninsula Health Districts", fontSize:"14", offset:"30"}
)
.padding("30")
.render()
viewof chart_6 = vl.markBar()
.data(hr_totals)
.transform(
vl.groupby('district').aggregate(vl.sum('cases').as('total_cases'))
)
.encode(
vl.x().fieldQ("total_cases").axis({title: "Total Cases", titleFontSize:"15", labelFontSize: "12", labelAngle: "90"}),
vl.y().fieldN("district").sort(vl.field('total_cases').order('descending')).axis({grid: false, title: "District", titleFontSize:"15", labelFontSize: "12"}),
vl.color({"legend": {title: "District"}}).fieldN("district"),
vl.tooltip([vl.fieldN("district"), "total_cases"])
)
.title(
{text:"Total Cases for Western Tidewater, Chesapeake, Virginia Beach, Norfolk, Portsmouth, Hampton, Peninsula Health Districts", fontSize:"16", offset:"30"}
)
.width(600)
.height(250)
.padding("10")
.render()
viewof chart_7 = vl.markBoxplot()
.data(covid_totals)
.transform(
vl.groupby('district').aggregate(vl.sum('cases').as('Total Cases'))
)
.encode(
vl.y().fieldQ("Total Cases").axis({ titleFontSize:"15", labelFontSize: "12"}),
vl.size( {"value": 75}),
vl.color( {"value": "teal"}),
// vl.whisker()
)
.title(
{text:"Total Cases per Each Health District in VA", fontSize:"20", offset:"30"}
)
.width(250)
.height(400)
.padding("100")
.render()
d3 = require("d3@6")
import { vl } from "@vega/vega-lite-api"
import {printTable} from '@uwdata/data-utilities'
vegaEmbed = require("vega-embed@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.
