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))
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))
vl.markPoint() // Make a scatterplot
.data(covid_totals) // Use the covid_totals array to only use the last day of data
.encode(
vl.x().fieldQ('cases'), // Quantitative field cases
vl.y().fieldQ('deaths'), // Quantitative field deaths
vl.tooltip(['locality', 'cases', 'deaths']) // Tooltip to show locality, number of cases, and deaths
)
.render()
vl.markPoint() // Create the scatterplot
.data(covid) // Use the unfiltered and unsorted data
.transform(
// Group by date and sum the cases and hospitalizations
vl.groupby('date').aggregate([vl.sum('cases').as('total_cases'), vl.sum('hospitalizations').as('total_hospitalizations')])
)
.encode(
vl.x().fieldQ('total_cases'), // Quantitative field total_cases
vl.y().fieldQ('total_hospitalizations'), // Quantitative field total_hospitalizations
vl.tooltip(['date', 'total_cases', 'total_hospitalizations']) // Tooltip to show the date, total cases (x), and total hospitalizations (y)
)
.render()
vl.markLine() // Create a line chart
.data(covid) // Use the original data
.encode(
vl.x().fieldT('date').title(null), // Temporal field date, remove x axis label
vl.y().sum(vl.repeat('column')), // Sum the fields in the column for the y axis
vl.tooltip(['date']) // Tooltip to show the date at the place the user is hovering on the line
)
.repeat({column: ['cases', 'hospitalizations', 'deaths']}) // Create 3 columns
.render();
vl.markLine() // Create the line graph
.data(hr_covid) // Use the Hampton Roads data
.encode(
vl.x().fieldT('date'), // Temporal field date
vl.y().sum('cases'), // Sum the cases for the y value
vl.color().fieldN('district'), // Categorical attribute district, add a colored line for each district
vl.tooltip(['district', 'date']) // Tooltip to show which district that line is for
// and the date at the hover location
)
.render()
{
return vl.markLine() // Create a line chart
.encode(
vl.x().fieldT('date'), // Temporal field date
vl.y().sum('cases'), // Sum the cases for the y value
)
.width(150) // Set width so each chart isn't too large
.height(150) // Set height so each chart isn't too large
.facet({column: vl.field('district')}) // Facet by district
// One chart for each district
.data(hr_covid) // Use the Hampton Roads data
.render();
}
{
return vl.markBar() // Create the bar chart
.data(hr_totals) // Use the Hampton Roads totals data
.encode(
vl.y().fieldN('district').sort(vl.sum('cases').order('descending')), // Categorical attribute district
// Sort in descending order
// by sum of cases
vl.x().sum('cases'), // Sum cases for the x axis
vl.tooltip([vl.sum('cases')]) // Tooltip to show the exact cases for that district
)
.render()
}
vl.markBoxplot() // Create the boxplot
.data(covid_totals) // Use the covid_totals array
.transform(
// Group by district and sum the cases over all localities in each health district
vl.groupby('district').aggregate(vl.sum('cases').as('total_cases'))
)
.encode(
vl.y().fieldQ('total_cases'), // Quantitative field total_cases
vl.tooltip(['district']) // Tooltip to show district
)
.width(120)
.height(250)
.render()
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.