Actualmente estoy trabajando en un portátil Observable que usa la API VegaLite y quiero agregar un control deslizante que permita a un usuario ver casos de COVID en estados en fechas específicas.
El código del mapa:
{ 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() }Aquí está el código para el control deslizante:
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; }