Published
Edited
Feb 10, 2021
covid.sort(function (a, b) {
return a.date - b.date;
});
printTable(covid.slice(0,7))
printTable(covid.slice(-7))
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, 7))
printTable(hr_covid.slice(-7))
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))
// Check the values for the district in the hr_covid
districts = new Set(hr_covid.map(d => d.district))
printTable(covid_totals.slice(0, 7))
printTable(hr_totals)
hr_covid_totals = hr_covid.filter(d => d.date >= last_date)
printTable(hr_covid_totals)
viewof chart1 = vl.markCircle({tooltip: {"content": "data"}})
.data(covid_totals)
.encode(
vl.x().fieldQ("cases"),
vl.y().fieldQ("deaths"),
vl.color().fieldN("locality"),
)
.title({text: "Total cases vs. deaths per locality"})
.render()
viewof chart2 = vl.markCircle({tooltip: {"content": "data"}})
.data(covid)
.encode(
vl.x().sum("cases"),
vl.y().sum("hospitalizations"),
vl.color().fieldT("date")
)
.title({text: "Total cases vs. hospitalizations"})
.render()
viewof chart3a = vl.markLine({tooltip: {"content": "data"}})
.data(covid)
.encode(
vl.x().fieldT("date"),
vl.y().sum(vl.repeat("column"))
)
.repeat({
column: ["cases", "hospitalizations", "deaths"]
})
.title({text: "Total cases hospitalizations, and deaths over time"})
.render()
// repeat in the same column
viewof chart3c = vl.markLine({tooltip: {"content": "data"}})
.data(covid)
.encode(
vl.x().fieldT("date"),
vl.y().sum(vl.repeat("row"))
)
.repeat({
row: ["cases", "hospitalizations", "deaths"]
})
.title({text: "Total cases hospitalizations, and deaths over time"})
.render()
viewof chart4 = vl.markLine({tooltip: {"content": "data"}})
.data(hr_covid)
.encode(
vl.x().fieldT("date"),
vl.y().sum("cases"),
vl.color().fieldN("district")
)
.title({text: "Total cases overtime for Hampton roads health districts"})
.render()
viewof chart5a = vl.markLine({tooltip: {"content": "data"}})
.data(hr_covid)
.encode(
vl.x().fieldT("date"),
vl.y().sum("cases"),
vl.column().fieldN("district")
)
.title({text: "Total cases over time for Hampton roads health districts"})
.render()
viewof chart5b = vl.markLine({tooltip: {"content": "data"}})
.data(hr_covid)
.encode(
vl.x().fieldT("date"),
vl.y().sum("cases"),
vl.column().fieldN("district")
)
.width(100)
.height(100)
.title({text: "Total cases over time for Hampton roads health districts"})
.render()
viewof chart6 = vl.markBar({tooltip: {"content": "data"}})
.data(hr_covid)
.encode(
vl.x().sum("cases"),
vl.y().fieldN("district").sort(vl.sum("cases").order("descending")),
)
.title({text: "Total cases for Hampton roads health districts"})
.render()
grouped_data = covid_totals.reduce((res, value) => {
if(!res[value.district]){
res[value.district] = value.cases;
}
else{
res[value.district] = res[value.district] + value.cases;
}
return res
}, {})
grouped_data_list = Object.keys(grouped_data)
.map(function(key) {
let a = new Object();
a["district"] = key;
a["total"] = grouped_data[key];
return a
})
viewof chart7a = vl.markBoxplot({tooltip: {"content": "data"}})
.data(grouped_data_list)
.encode(
vl.x().fieldQ("total"),
)
.title({text: "Total cases per health district"})
.render()
covid_totals.slice(0, 10)
viewof chart7b = vl.markBoxplot({tooltip: {"content": "data"}})
.data(covid_totals)
.transform(
vl.groupby("district").aggregate(vl.sum("cases").as("sum"))
)
.encode(
vl.x().fieldQ("sum"),
)
.title({text: "Total cases per health district"})
.render()
md`
An alternative approach for the graph is to use the "transform()" function to perform the operations we previously did with javascript functions. We can specify the grouping and group wise aggregation by using vl functions here. For grouping, we can use "groupby()" with "district" as the parameter to group the data by district. Then we can perform summed aggregation by using "aggregate()" function by specifying the "sum()" as the operation.
The districtwise aggregated sum is available under "sum" property after this step. So, similar to previous example, we can generate the chart by simply specifying the field we need to plot.
`
districtsx = new Set(covid_totals.map(d => d.district))
d3 = require("d3@6")
import { vl } from "@vega/vega-lite-api"
import {printTable} from '@uwdata/data-utilities'
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.