Published
Edited
Mar 5, 2021
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))
districts = uniqueValid(hr_covid, d=>d.district)
chart = {
// Menu to select district
const selection = vl.selectSingle('Select')
.fields('district')
.bind({district: vl.menu(districts)});
// Chart sizes
const big_hist_size = width - 80;
const left_hist_width = width * 0.45;
const right_hist_width = width * 0.31;
// Define the brush
const brush = vl.selectInterval().encodings('x').resolve('intersect');
// The histogram that will allow you to use the brush to select the
// interval for the biggest histogram
const brush_hist = vl.markBar()
.data(covid) // Brushable histogram will use the standard covid data
.encode(
vl.x().fieldT("date"),
vl.y().fieldQ("cases")
);
// Add the brush layer onto this histogram
const brush_hist_layer = vl.layer(
// Brushed
brush_hist.select(brush).encode(vl.color().value('steelblue'))
)
.height(80).width(left_hist_width);
// The histogram that will be horizontal and have the district
// as the y axis and the number of cases as the x axis
const horizontal_hist = vl.markBar()
.data(hr_totals) // Horizontal hist will use the totals data
.encode(
vl.x().sum('cases'),
vl.y().fieldN('district').sort(vl.sum('cases').order('descending'),
vl.tooltip(['cases']))
)
.title("Total Cases")
.height(80)
.width(right_hist_width);
// The x axis for the biggest histogram
const x = vl.x().fieldT('date').title(null);
// Create the biggest histogram
const big_histogram = vl.markBar()
.data(covid) // Biggest histogram will use the standard covid data
.encode(
x.scale({domain: brush}), // The x domain depends on the selection in the brushable histogram
vl.y().fieldQ("cases"),
vl.tooltip(['cases', 'date'])) // Add tooltips to see cases and the date
.height(300)
.width(big_hist_size); // Apply the previously declared width variable
// Change the big histogram based on the district selection
const big_histogram_layer = vl.layer(
big_histogram.select(selection).encode(vl.color().value('lightgrey')),
big_histogram.transform(vl.filter(selection)));
// Horizontally combine the two smaller histograms that will be on top
// Put the brushable one on the left and the horizontal one on the right
const top = vl.hconcat(brush_hist_layer, horizontal_hist);
// Put the two smaller histograms on top of the bigger one
return vl.vconcat(top, big_histogram_layer)
.render();
}
d3 = require("d3@6")
import { vl } from "@vega/vega-lite-api"
import {printTable} from '@uwdata/data-utilities'
import {uniqueValid} from '@uwdata/data-utilities'
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.
