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'
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.