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