I am currently working on an Observable notebook using the VegaLite API and want to add a slider that allows a user to see COVID cases in states on specific dates.
The code for the map:
{
const legend = {
title: "Cases on " + string,
orient: "none"
};
const state = vl.markGeoshape()
.data(vl.topojson(usa).feature("states"))
.params(string)
.transform(
vl.lookup("id")
.from(vl.data(StatesFileTyped).params(string).transform({type: "filter", filter: "date", equal: "string", expr: "datum.date === string"}).key("fips").fields("state", "new_case", "date")),
)
.encode(
vl.color().fieldQ("new_case")
.scale({domain: [0, 51000]})
.legend(legend),
vl.tooltip().fieldQ("new_case")
);
const states = vl.markGeoshape({fill: null, stroke: "grey", strokeWidth: .25})
.data(vl.topojson(usa).mesh("states"));
return vl.layer(state, states)
.project(vl.projection("albersUsa"))
.width(width - 100)
.height(Math.floor(0.6 * width - 100))
.render()
}Here is the code for the slider:
viewof days_in = Inputs.range([0, 845], {step: 1, label: "Day of the Pandemic"});
date_selected = d3.utcFormat("%m/%d/%Y")(timeScale.invert(days_in)).split("/");
string = {
let stringDate = "";
for (let i = 0; i < date_selected.length; i++) {
if (i == date_selected.length - 1) {
stringDate += parseInt(date_selected[i], 10);
} else {
stringDate += parseInt(date_selected[i], 10) + "/";
}
}
return stringDate;
}