CS 725/825, Spr21 - HW3
CS 725/825, Spr21 - HW3 - Part 1 - Vega-Lite Dashboard
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;
});
covid.sort((a, b) => 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,10))
printTable(hr_covid.slice(-10))
last_date = covid[covid.length-1].date
covid_totals = covid.filter(d => d.date >= last_date)
printTable(covid_totals.slice(0,10))
hr_totals = covid_totals.filter(d => hr_districts.has(d.district))
printTable(hr_totals)
hr_district_list = [...hr_districts]
dashboard = {
const selection = vl.selectSingle('Select')
.fields('district')
.bind({district: vl.menu(hr_district_list)});
// variables to get the dashboard to fit nicely
const num_first_row_charts = 2;
const first_row_hist_chart_width = width * 0.47;
const first_row_bar_chart_width = width * 0.3;
const second_row_chart_width = width - 98;
const second_row_chart_height = second_row_chart_width * 0.5;
const first_row_charts_height = second_row_chart_width * 0.125;
// brushing and linking example from https://observablehq.com/@uwdata/interaction
const brush = vl.selectInterval().encodings('x').resolve('intersect');
// First row base histogram
const top_histogram = vl.markBar()
.data(hr_covid)
.encode(
vl.x()
.fieldT("date")
.title(null),
vl.y()
.fieldQ("hospitalizations")
);
//combined histogram with total in grey and selected in blue (when selected)
const top_histogram_layer = vl.layer(
top_histogram.select(brush).encode(vl.color().value('steelblue')) // keep blue even when selected
// top_histogram.select(brush).encode(vl.color().value('lightgrey')), // turn all grey when selected
// top_histogram.transform(vl.filter(brush))) // layer selected values on top in default blue
)
.height(first_row_charts_height)
.width(first_row_hist_chart_width);
// First row horizontal bar chart
const horizontal_bar_chart = vl.markBar()
.data(hr_totals)
.encode(
vl.x()
.sum('hospitalizations')
.title(null),
vl.y()
.fieldN('district')
.title(null)
.sort(vl.sum('hospitalizations').order('descending'))
)
.title("Total Hospitalizations")
.height(first_row_charts_height)
.width(first_row_bar_chart_width);
// Second row base histogram with tooltip
const bottom_histogram = vl.markBar({tooltip: {"content": "data"}})
.data(hr_covid)
.encode(
vl.x()
.fieldT('date')
.title(null)
.scale({domain: brush}), // The x domain varies with the selection of the top_histogram
vl.y()
.fieldQ("hospitalizations"))
.height(second_row_chart_height)
.width(second_row_chart_width);
// Second row histogram layer
const bottom_histogram_layer = vl.layer(
bottom_histogram.select(selection).encode(vl.color().value('lightgrey')),
bottom_histogram.transform(vl.filter(selection)));
// place the histogram and horizontal bar chart in first row and placeit with the second row chart
return vl.vconcat(vl.hconcat(top_histogram_layer, horizontal_bar_chart), bottom_histogram_layer)
.title("Hampton Roads COVID Dashboard") // Title of the Dashboard
.render();
}
d3 = require("d3@6")
import { vl } from "@vega/vega-lite-api"
import {printTable} 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.
