31:T107d,{ // the bars of the top graph const bars = vl.markBar({color: "green", width: 2}) .encode( vl.x().fieldT("DATE"), // one bar per day along the x-axis vl.y().sum("CASES"), // for each day, sum the number of new cases vl.opacity().value(0.4), // make the bars less prominent vl.tooltip([ // add a tooltip to the bars {field: "DATE", type: "temporal", title: 'Datum'}, {field: "CASES", aggregate: "sum", title: "Ziekenhuisopnames" } ]) ) .width(700); // the average line on the top graph const average = vl.markLine({interpolate: "monotone", color: "green"}) // draw a slightly smoother line // first calculate some secondary data points .transform( // calculate a rolling average with a window of the 6 days and today vl.groupby("PROVINCE").window(vl.mean("CASES").as("AVG_CASES")).frame([-6,0]), // sum the provinces for each day vl.groupby("DATE").aggregate(vl.sum("AVG_CASES").as("AVG_CASES_BY_DATE")) ) .encode( vl.x() .fieldT("DATE") .title(null), // disable the title on the x-axis vl.y().sum("AVG_CASES_BY_DATE").title('Ziekenhuisopnames per dag'), vl.tooltip().sum("AVG_CASES_BY_DATE") ); // the bottom graph const diff = vl.markBar({width: 2}) // first calculate some secondary data points .transform( // rolling average, same as above vl.groupby("PROVINCE").window(vl.mean("CASES").as("AVG_CASES")).frame([-6,0]), vl.groupby("DATE").aggregate(vl.sum("AVG_CASES").as("AVG_CASES_BY_DATE")), // for each day, add a value containing the value of the previous day vl.window(vl.lag("AVG_CASES_BY_DATE").as("PREV_AVG_CASES_BY_DATE")).frame([-1,0]), // calculate the percentual difference between 2 days vl.calculate('datum.PREV_AVG_CASES_BY_DATE == null ? 0 : (datum.AVG_CASES_BY_DATE / (datum.PREV_AVG_CASES_BY_DATE)) - 1').as('DIFF') ) .encode( // draw the bars as before vl.x().fieldT("DATE").title(null), vl.y().sum("DIFF") .title('Verschil dag ervoor') .axis({format: ".0%"}), // format the values as percentage // color the bars according to a condition vl.color() .condition([ // positive in orange { test: "datum.DIFF > 0", value: "orange" } ]) .value("green"), // others in green vl.tooltip([ {field: "DATE", type: "temporal", title: 'Datum'}, {field: "DIFF", format: ".2%", title: 'Verschil'} ]) ) .width(700) .height(150); // the bottom graph const diff2 = vl.markBar({width: 2}) // first calculate some secondary data points .transform( // rolling average, same as above vl.groupby("PROVINCE").window(vl.mean("CASES").as("AVG_CASES")).frame([-6,0]), vl.groupby("DATE").aggregate(vl.sum("AVG_CASES").as("AVG_CASES_BY_DATE")), // for each day, add a value containing the value of the previous day vl.window(vl.lag("AVG_CASES_BY_DATE", 7).as("PREV_AVG_CASES_BY_DATE")).frame([-1,0]), // calculate the percentual difference between 2 days vl.calculate('datum.PREV_AVG_CASES_BY_DATE == null ? 0 : (datum.AVG_CASES_BY_DATE / (datum.PREV_AVG_CASES_BY_DATE)) - 1').as('DIFF') ) .encode( // draw the bars as before vl.x().fieldT("DATE").title(null), vl.y().sum("DIFF") .title('Verschil week ervoor') .axis({format: ".0%"}), // format the values as percentage // color the bars according to a condition vl.color() .condition([ // positive in orange { test: "datum.DIFF > 0", value: "orange" } ]) .value("green"), // others in green vl.tooltip([ {field: "DATE", type: "temporal", title: 'Datum'}, {field: "DIFF", format: ".2%", title: 'Verschil'} ]) ) .width(700) .height(150); // concat the graphs and render return vl.vconcat(vl.layer(bars, average), diff, diff2) .data(hospitalisations.filter(d => d.PROVINCE !== "België" && d.PROVINCE !== "Vlaanderen" && d.PROVINCE !== "Wallonië")) .title("Nieuwe ziekenhuisopnames per dag") .render() }32:T1630,{ // the bars of the top graph const bars = vl .markBar({ color: "green", width: 3 }) .encode( vl.x().fieldT("DATE"), // one bar per day along the x-axis vl.y().sum("CASES").axis({grid: true}), // for each day, sum the number of new cases vl.opacity().value(0.5), // make the bars less prominent vl.tooltip([ // add a tooltip to the bars { field: "DATE", type: "temporal", title: 'Datum' }, { field: "CASES", aggregate: "sum", title: "Ziekenhuisopnames" } ]) ) .width(700); const ruleOrange = vl.markRule({stroke: "orange", strokeWidth: 1.5, opacity: 1}).data([{}]) .encode(vl.y().datum(65)); const textOrange = vl.markText({align: "left", dx: 5, dy: -6}).data([{}]) .encode(vl.y().datum(65), vl.x().value(0), vl.text().datum("65 opnames per dag")); const ruleRed = vl.markRule({stroke: "red", strokeWidth: 1.5, opacity: 1}).data([{}]) .encode(vl.y().datum(150)); const textRed = vl.markText({align: "left", dx: 5, dy: -6}).data([{}]) .encode(vl.y().datum(150), vl.x().value(0), vl.text().datum("150 opnames per dag")); // the average line on the top graph const average = vl .markLine({ interpolate: "monotone", color: "green" }) // draw a slightly smoother line // first calculate some secondary data points .transform( // calculate a rolling average with a window of the 6 days and today vl .groupby("PROVINCE") .window(vl.mean("CASES").as("AVG_CASES")) .frame([-6, 0]), // sum the provinces for each day vl.groupby("DATE").aggregate(vl.sum("AVG_CASES").as("AVG_CASES_BY_DATE")) ) .encode( vl .x() .fieldT("DATE") .title(null), // disable the title on the x-axis vl .y() .sum("AVG_CASES_BY_DATE") .title('Ziekenhuisopnames per dag'), vl.tooltip().sum("AVG_CASES_BY_DATE") ); // the bottom graph const diff = vl .markBar({ width: 3 }) // first calculate some secondary data points .transform( // rolling average, same as above vl .groupby("PROVINCE") .window(vl.mean("CASES").as("AVG_CASES")) .frame([-6, 0]), vl.groupby("DATE").aggregate(vl.sum("AVG_CASES").as("AVG_CASES_BY_DATE")), // for each day, add a value containing the value of the previous day vl .window(vl.lag("AVG_CASES_BY_DATE").as("PREV_AVG_CASES_BY_DATE")) .frame([-1, 0]), // calculate the percentual difference between 2 days vl .calculate( 'datum.PREV_AVG_CASES_BY_DATE == null ? 0 : (datum.AVG_CASES_BY_DATE / (datum.PREV_AVG_CASES_BY_DATE)) - 1' ) .as('DIFF') ) .encode( // draw the bars as before vl .x() .fieldT("DATE") .title(null), vl .y() .sum("DIFF") .scale({ domainMin: -0.2, domainMax: 0.4, clamp: true }) .title('Verschil dag ervoor') .axis({ format: ".0%" }), // format the values as percentage // color the bars according to a condition vl .color() .condition([ // positive in orange { test: "datum.DIFF > 0", value: "orange" } ]) .value("green"), // others in green vl.tooltip([ { field: "DATE", type: "temporal", title: 'Datum' }, { field: "DIFF", format: ".2%", title: 'Verschil' } ]) ) .width(700) .height(150); // the bottom graph const diff2 = vl .markBar({ width: 3 }) // first calculate some secondary data points .transform( // rolling average, same as above vl .groupby("PROVINCE") .window(vl.mean("CASES").as("AVG_CASES")) .frame([-6, 0]), vl.groupby("DATE").aggregate(vl.sum("AVG_CASES").as("AVG_CASES_BY_DATE")), // for each day, add a value containing the value of the previous day vl .window(vl.lag("AVG_CASES_BY_DATE", 7).as("PREV_AVG_CASES_BY_DATE")) .frame([-1, 0]), // calculate the percentual difference between 2 days vl .calculate( 'datum.PREV_AVG_CASES_BY_DATE == null ? 0 : (datum.AVG_CASES_BY_DATE / (datum.PREV_AVG_CASES_BY_DATE)) - 1' ) .as('DIFF') ) .encode( // draw the bars as before vl .x() .fieldT("DATE") .title(null), vl .y() .sum("DIFF") .scale({ domainMin: -0.5, domainMax: 1, clamp: true }) .title('Verschil week ervoor') .axis({ format: ".0%" }), // format the values as percentage // color the bars according to a condition vl .color() .condition([ // positive in orange { test: "datum.DIFF > 0", value: "orange" } ]) .value("green"), // others in green vl.tooltip([ { field: "DATE", type: "temporal", title: 'Datum' }, { field: "DIFF", format: ".2%", title: 'Verschil' } ]) ) .width(700) .height(150); let top = vl.layer(bars, average); if (province === "België") { top = vl.layer(ruleOrange, textOrange, ruleRed, textRed, bars, average); } // concat the graphs and render return vl .vconcat(top, diff, diff2) .title(`Evolutie nieuwe ziekenhuisopnames in ${province}`) .data( hospitalisations .filter( d => d.PROVINCE !== "België" && d.PROVINCE !== "Vlaanderen" && d.PROVINCE !== "Wallonië" ) .filter(d => new Date(d.DATE) >= new Date("2022-01-01")) .filter(d => (province == "België" ? true : d.PROVINCE == province)) ) .render(); }33:Tec0,{ // the bars of the top graph const bars = vl .markBar({ color: "orange", width: 3 }) .encode( vl .x() .fieldT("DATE") .title(null), // one bar per day along the x-axis vl .y() .sum("TOTAL_IN") .title("Patiënten in ziekenhuis"), // for each day, sum the number of new cases vl.opacity().value(0.5), // make the bars less prominent vl.tooltip([ // add a tooltip to the bars { field: "DATE", type: "temporal", title: 'Datum' }, { field: "TOTAL_IN", aggregate: "sum", title: "Patiënten in ziekenhuis" } ]) ) .width(700); // the bottom graph const diff = vl .markBar({ width: 3 }) // first calculate some secondary data points .transform( vl.groupby("DATE").aggregate(vl.sum("TOTAL_IN").as("SUM_TOTAL_IN")), // for each day, add a value containing the value of the previous day vl.window(vl.lag("SUM_TOTAL_IN").as("PREV_TOTAL_IN")).frame([-1, 0]), // calculate the percentual difference between 2 days vl .calculate( 'datum.PREV_TOTAL_IN == null ? 0 : (datum.SUM_TOTAL_IN / (datum.PREV_TOTAL_IN)) - 1' ) .as('DIFF') ) .encode( // draw the bars as before vl .x() .fieldT("DATE") .title(null), vl .y() .sum("DIFF") .scale({ domainMin: -0.2, domainMax: 0.4, clamp: true }) .title('Verschil dag ervoor') .axis({ format: ".0%" }), // format the values as percentage // color the bars according to a condition vl .color() .condition([ // positive in orange { test: "datum.DIFF > 0", value: "orange" } ]) .value("green"), // others in green vl.tooltip([ { field: "DATE", type: "temporal", title: 'Datum' }, { field: "DIFF", format: ".2%", title: 'Verschil' } ]) ) .width(700) .height(150); // the bottom graph const diff2 = vl .markBar({ width: 3 }) // first calculate some secondary data points .transform( vl.groupby("DATE").aggregate(vl.sum("TOTAL_IN").as("SUM_TOTAL_IN")), // for each day, add a value containing the value of the previous day vl.window(vl.lag("SUM_TOTAL_IN", 7).as("PREV_TOTAL_IN")).frame([-1, 0]), // calculate the percentual difference between 2 days vl .calculate( 'datum.PREV_TOTAL_IN == null ? 0 : (datum.SUM_TOTAL_IN / (datum.PREV_TOTAL_IN)) - 1' ) .as('DIFF') ) .encode( // draw the bars as before vl .x() .fieldT("DATE") .title(null), vl .y() .sum("DIFF") .scale({ domainMin: -0.5, domainMax: 1, clamp: true }) .title('Verschil week ervoor') .axis({ format: ".0%" }), // format the values as percentage // color the bars according to a condition vl .color() .condition([ // positive in orange { test: "datum.DIFF > 0", value: "orange" } ]) .value("green"), // others in green vl.tooltip([ { field: "DATE", type: "temporal", title: 'Datum' }, { field: "DIFF", format: ".2%", title: 'Verschil' } ]) ) .width(700) .height(150); // concat the graphs and render return vl .vconcat(bars, diff, diff2) .title(`Evolutie patiënten in ziekenhuis in ${province_patients}`) .data( raw_hospitalisations .filter(d => new Date(d.DATE) >= new Date("2022-01-01")) .filter(d => province_patients == "België" ? true : names[d.PROVINCE] == province_patients ) ) .render(); }34:T11ee,{ // the bars of the top graph const bars = vl .markBar({ color: "red", width: 3 }) .encode( vl .x() .fieldT("DATE") .title(null), // one bar per day along the x-axis vl .y().axis({grid: true}) .sum("TOTAL_IN_ICU") .title("COVID-Patiënten in ICU"), // for each day, sum the number of new cases vl.opacity().value(0.5), // make the bars less prominent vl.tooltip([ // add a tooltip to the bars { field: "DATE", type: "temporal", title: 'Datum' }, { field: "TOTAL_IN_ICU", aggregate: "sum", title: "Patiënten in ICU" } ]) ) .width(700); const ruleOrange = vl.markRule({stroke: "orange", strokeWidth: 1.5, opacity: 1}).data([{}]) .encode(vl.y().datum(300)); const textOrange = vl.markText({align: "left", dx: 5, dy: -6}).data([{}]) .encode(vl.y().datum(300), vl.x().value(0), vl.text().datum("300 patiënten op ICU")); const ruleRed = vl.markRule({stroke: "red", strokeWidth: 1.5, opacity: 1}).data([{}]) .encode(vl.y().datum(500)); const textRed = vl.markText({align: "left", dx: 5, dy: -6}).data([{}]) .encode(vl.y().datum(500), vl.x().value(0), vl.text().datum("500 patiënten op ICU")); // the bottom graph const diff = vl .markBar({ width: 3 }) // first calculate some secondary data points .transform( vl .groupby("DATE") .aggregate(vl.sum("TOTAL_IN_ICU").as("SUM_TOTAL_IN_ICU")), // for each day, add a value containing the value of the previous day vl .window(vl.lag("SUM_TOTAL_IN_ICU").as("PREV_TOTAL_IN_ICU")) .frame([-1, 0]), // calculate the percentual difference between 2 days vl .calculate( 'datum.PREV_TOTAL_IN_ICU == null ? 0 : (datum.SUM_TOTAL_IN_ICU / (datum.PREV_TOTAL_IN_ICU)) - 1' ) .as('DIFF') ) .encode( // draw the bars as before vl .x() .fieldT("DATE") .title(null), vl .y() .sum("DIFF") .scale({ domainMin: -0.2, domainMax: 0.4, clamp: true }) .title('Verschil dag ervoor') .axis({ format: ".0%" }), // format the values as percentage // color the bars according to a condition vl .color() .condition([ // positive in orange { test: "datum.DIFF > 0", value: "orange" } ]) .value("green"), // others in green vl.tooltip([ { field: "DATE", type: "temporal", title: 'Datum' }, { field: "DIFF", format: ".2%", title: 'Verschil' } ]) ) .width(700) .height(150); // the bottom graph const diff2 = vl .markBar({ width: 3 }) // first calculate some secondary data points .transform( vl .groupby("DATE") .aggregate(vl.sum("TOTAL_IN_ICU").as("SUM_TOTAL_IN_ICU")), // for each day, add a value containing the value of the previous day vl .window(vl.lag("SUM_TOTAL_IN_ICU", 7).as("PREV_TOTAL_IN_ICU")) .frame([-1, 0]), // calculate the percentual difference between 2 days vl .calculate( 'datum.PREV_TOTAL_IN_ICU == null ? 0 : (datum.SUM_TOTAL_IN_ICU / (datum.PREV_TOTAL_IN_ICU)) - 1' ) .as('DIFF') ) .encode( // draw the bars as before vl .x() .fieldT("DATE") .title(null), vl .y() .sum("DIFF") .scale({ domainMin: -0.5, domainMax: 1, clamp: true }) .title('Verschil week ervoor') .axis({ format: ".0%" }), // format the values as percentage // color the bars according to a condition vl .color() .condition([ // positive in orange { test: "datum.DIFF > 0", value: "orange" } ]) .value("green"), // others in green vl.tooltip([ { field: "DATE", type: "temporal", title: 'Datum' }, { field: "DIFF", format: ".2%", title: 'Verschil' } ]) ) .width(700) .height(150); let top = bars; if (province === "België") { top = vl.layer(ruleOrange, textOrange, ruleRed, textRed, bars); } // concat the graphs and render return vl .vconcat(top, diff, diff2) .title(`Evolutie patiënten in ICU in ${province_patients_ICU}`) .data( raw_hospitalisations .filter(d => new Date(d.DATE) >= new Date("2022-01-01")) .filter(d => province_patients_ICU == "België" ? true : names[d.PROVINCE] == province_patients_ICU ) ) .render(); }35:Ted5,{ // the bars of the top graph const bars = vl .markBar({ color: "red", width: 1 }) .encode( vl .x() .fieldT("DATE") .title(null), // one bar per day along the x-axis vl .y() .sum("TOTAL_IN_ICU") .title("Patiënten in ICU"), // for each day, sum the number of new cases vl.opacity().value(0.5), // make the bars less prominent vl.tooltip([ // add a tooltip to the bars { field: "DATE", type: "temporal", title: 'Datum' }, { field: "TOTAL_IN_ICU", aggregate: "sum", title: "Patiënten in ICU" } ]) ) .width(800); // the bottom graph const diff = vl .markBar({ width: 1 }) // first calculate some secondary data points .transform( vl .groupby("DATE") .aggregate(vl.sum("TOTAL_IN_ICU").as("SUM_TOTAL_IN_ICU")), // for each day, add a value containing the value of the previous day vl .window(vl.lag("SUM_TOTAL_IN_ICU").as("PREV_TOTAL_IN_ICU")) .frame([-1, 0]), // calculate the percentual difference between 2 days vl .calculate( 'datum.PREV_TOTAL_IN_ICU == null ? 0 : (datum.SUM_TOTAL_IN_ICU / (datum.PREV_TOTAL_IN_ICU)) - 1' ) .as('DIFF') ) .encode( // draw the bars as before vl .x() .fieldT("DATE") .title(null), vl .y() .sum("DIFF") .scale({ domainMin: -0.2, domainMax: 0.4, clamp: true }) .title('Verschil dag ervoor') .axis({ format: ".0%" }), // format the values as percentage // color the bars according to a condition vl .color() .condition([ // positive in orange { test: "datum.DIFF > 0", value: "orange" } ]) .value("green"), // others in green vl.tooltip([ { field: "DATE", type: "temporal", title: 'Datum' }, { field: "DIFF", format: ".2%", title: 'Verschil' } ]) ) .width(800) .height(150); // the bottom graph const diff2 = vl .markBar({ width: 1 }) // first calculate some secondary data points .transform( vl .groupby("DATE") .aggregate(vl.sum("TOTAL_IN_ICU").as("SUM_TOTAL_IN_ICU")), // for each day, add a value containing the value of the previous day vl .window(vl.lag("SUM_TOTAL_IN_ICU", 7).as("PREV_TOTAL_IN_ICU")) .frame([-1, 0]), // calculate the percentual difference between 2 days vl .calculate( 'datum.PREV_TOTAL_IN_ICU == null ? 0 : (datum.SUM_TOTAL_IN_ICU / (datum.PREV_TOTAL_IN_ICU)) - 1' ) .as('DIFF') ) .encode( // draw the bars as before vl .x() .fieldT("DATE") .title(null), vl .y() .sum("DIFF") .scale({ domainMin: -0.5, domainMax: 1, clamp: true }) .title('Verschil week ervoor') .axis({ format: ".0%" }), // format the values as percentage // color the bars according to a condition vl .color() .condition([ // positive in orange { test: "datum.DIFF > 0", value: "orange" } ]) .value("green"), // others in green vl.tooltip([ { field: "DATE", type: "temporal", title: 'Datum' }, { field: "DIFF", format: ".2%", title: 'Verschil' } ]) ) .width(800) .height(150); // concat the graphs and render return vl .vconcat(bars, diff, diff2) .title(`Evolutie patiënten in ICU in ${province_patients_ICU}`) .data( raw_hospitalisations .filter(d => province_patients_ICU == "België" ? true : names[d.PROVINCE] == province_patients_ICU ) ) .render(); }36:T7d7,{ // here we use the facet feature of vega to create subplots of each of the values of a data field const dots = vl.markCircle({color: "green"}) .encode( vl.x().fieldT("DATE"), vl.y().sum("CASES").scale({domainMin: 0, nice: false}).axis({labelExpr: "datum.value < 100 ? '' + datum.value: datum.value"}), vl.opacity().value(0.3) ); const average = vl.markLine({interpolate: "monotone", color: "green"}) .transform( vl.groupby("PROVINCE").window(vl.mean("CASES").as("ROLLING")).frame([-6,0]) ) .encode( vl.x().fieldT("DATE").title(null), vl.y().sum("ROLLING").title(null) ); const ruleOrange = vl.markRule({stroke: "orange", strokeWidth: 1, opacity: 0.8}) .transform(vl.aggregate(vl.mean("ORANGE").as("1ORANGE"))) .encode(vl.y().fieldQ("1ORANGE").scale({round: true})); const ruleRed = vl.markRule({stroke: "red", strokeWidth: 1, opacity: 0.8}) .transform(vl.aggregate(vl.mean("RED").as("1RED"))) .encode(vl.y().fieldQ("1RED").scale({round: true})); const limit = vl.markRule({stroke: "red", strokeWidth: 1, opacity: 0.8}) .transform(vl.aggregate(vl.mean("LIMIT").as("1LIMIT"))) .encode(vl.y().fieldQ("1LIMIT").scale({round: true})); const max = vl.markRule({opacity: 0}) .encode(vl.y().fieldQ("MAX")); return vl.layer(max, ruleOrange, ruleRed, dots, average) .width(138).height(200) .facet({field: "PROVINCE", title: null, sort: ["Antwerpen", "Limburg", "Oost-Vlaanderen", "Vlaams-Brabant", "West-Vlaanderen", "Henegouwen", "Luik", "Luxemburg", "Namen", "Waals-Brabant"]}).columns(5) .resolve({scale: {x: 'independent', y: 'independent'}}) .data(hospitalisationsMax.filter(d => d.PROVINCE !== "België" && d.PROVINCE !== "Vlaanderen" && d.PROVINCE !== "Wallonië" && d.PROVINCE !== undefined && d.PROVINCE !== "Brussel")) .title({text: "Dagelijks aantal nieuwe ziekenhuisopnames en het 7-daags gemiddelde", subtitle: "Assen geschaald voor aantal inwoners"}) .render() }37:T83d,{ // here we use the facet feature of vega to create subplots of each of the values of a data field const dots = vl.markCircle({color: "green"}) .encode( vl.x().fieldT("DATE"), vl.y().sum("CASES").scale({domainMin: 0, nice: false}), vl.opacity().value(0.3) ); const average = vl.markLine({interpolate: "monotone", color: "green"}) .transform( vl.groupby("PROVINCE").window(vl.mean("CASES").as("ROLLING")).frame([-6,0]) ) .encode( vl.x().fieldT("DATE").title(null), vl.y().sum("ROLLING").title(null) ); const ruleOrange = vl.markRule({stroke: "orange", strokeWidth: 1, opacity: 0.8}) .transform(vl.aggregate(vl.mean("ORANGE").as("1ORANGE"))) .encode(vl.y().fieldQ("1ORANGE").scale({round: true})); const ruleRed = vl.markRule({stroke: "red", strokeWidth: 1, opacity: 0.8}) .transform(vl.aggregate(vl.mean("RED").as("1RED"))) .encode(vl.y().fieldQ("1RED").scale({round: true})); const limit = vl.markRule({stroke: "red", strokeWidth: 1, opacity: 0.8}) .transform(vl.aggregate(vl.mean("LIMIT").as("1LIMIT"))) .encode(vl.y().fieldQ("1LIMIT").scale({round: true})); const max = vl.markRule({opacity: 0}) .encode(vl.y().fieldQ("MAX")); const legend = vl.markRule({opacity: 0}) .data({"values": [{"name": "150 nieuwe opnames per dag", ref:1}, {"name": "65 nieuwe opnames per dag", ref:2}]}) .encode( vl.y().fieldQ("ref"), vl.color().fieldN("name").sort("descending") .scale({range: ["orange", "red"]}) .legend({ orient: "bottom", direction: "horizontal", title:"Nationale drempelwaarde" }) ); return vl.layer(legend, max, ruleOrange, ruleRed, dots, average) .width(190).height(250) .facet({field: "PROVINCE", title: null, sort: ["Brussel", "Vlaanderen", "Wallonië", "België"]}) .resolve({scale: {x: 'independent', y: 'independent'}}) .data(hospitalisationsMax.filter(d => d.PROVINCE === "België" || d.PROVINCE === "Vlaanderen" || d.PROVINCE === "Wallonië"|| d.PROVINCE === "Brussel")) .render() }38:T678,{ const in_hospital = vl.markArea({opacity: 0.3, width: 1, color: "gray"}) .encode( vl.x().fieldT("DATE").title(null), vl.y().fieldQ("TOTAL_IN").title("Opgenomen patiënten").scale({domainMax: 10000}) ); const in_icu = vl.markArea({opacity: 0.2, width: 1, color: "gray"}) .encode( vl.x().fieldT("DATE"), vl.y().fieldQ("TOTAL_IN_ICU") ); const in_resp = vl.markArea({opacity: 0.2, width: 1, color: "gray"}) .encode( vl.x().fieldT("DATE"), vl.y().fieldQ("TOTAL_IN_RESP") ); const RESP_ratio = vl.markLine({interpolate: "monotone"}) .encode( vl.x().fieldT("DATE"), vl.y().fieldQ("RESP_RATIO").axis({format: "%"}).title(null), vl.color().field("RESP_LEGEND").scale({scheme: "dark2"}).legend({title: null, orient: "bottom"}) ); const ICU_ratio = vl.markLine({interpolate: "monotone"}) .encode( vl.x().fieldT("DATE"), vl.y().fieldQ("ICU_RATIO").axis({grid: true}), vl.color().field("ICU_LEGEND"), vl.tooltip().fieldQ("ICU_RATIO") ); return vl .layer( vl.layer(in_hospital, in_icu, in_resp), vl.layer(RESP_ratio, ICU_ratio) ) .data(national_hospitalisations) .transform( vl.calculate("datum.TOTAL_IN_ICU/datum.TOTAL_IN").as("ICU_RATIO"), vl.calculate("datum.TOTAL_IN_RESP/datum.TOTAL_IN").as("RESP_RATIO"), vl.calculate("'Percentage op intensieve'").as("ICU_LEGEND"), vl.calculate("'Percentage aan beademing'").as("RESP_LEGEND"), ) .resolve({scale: {y: 'independent'}}) .title("Evolutie aandeel patiënten op intensieve") .width(500) .render(); }39:Ta22,hospitalisations = { const result = []; const grouped = d3a.rollup(raw_hospitalisations, v => d3.sum(v, d => d.NEW_IN), d => d.DATE, d => d.PROVINCE); hospi_dates.forEach(date => { provinces.forEach(province => { result.push({DATE: date, PROVINCE: names[province], OLD_PROVINCE: province, CASES: grouped.get(date).get(province) ? grouped.get(date).get(province) : 0, NORMAL: 1000000 * (grouped.get(date).get(province) ? grouped.get(date).get(province) : 0) / population[province], ORANGE: 65 / population["België"] * population[province], RED: 150 / population["België"] * population[province], LIMIT: limit * population[province]}); }); const vl = (grouped.get(date).get("Antwerpen") ? grouped.get(date).get("Antwerpen") : 0) + (grouped.get(date).get("Limburg") ? grouped.get(date).get("Limburg") : 0) + (grouped.get(date).get("WestVlaanderen") ? grouped.get(date).get("WestVlaanderen") : 0) + (grouped.get(date).get("OostVlaanderen") ? grouped.get(date).get("OostVlaanderen") : 0) + (grouped.get(date).get("VlaamsBrabant") ? grouped.get(date).get("VlaamsBrabant") : 0); const wal = (grouped.get(date).get("Liège") ? grouped.get(date).get("Liège") : 0) + (grouped.get(date).get("BrabantWallon") ? grouped.get(date).get("BrabantWallon") : 0) + (grouped.get(date).get("Luxembourg") ? grouped.get(date).get("Luxembourg") : 0) + (grouped.get(date).get("Hainaut") ? grouped.get(date).get("Hainaut") : 0) + (grouped.get(date).get("Namur") ? grouped.get(date).get("Namur") : 0); const bru = grouped.get(date).get("Brussels") ? grouped.get(date).get("Brussels") : 0; const un = grouped.get(date).get(undefined) ? grouped.get(date).get(undefined) : 0; result.push({DATE: date, PROVINCE: "Vlaanderen", OLD_PROVINCE: "Vlaanderen", CASES: vl, NORMAL: 1000000 * vl / population["Vlaanderen"], ORANGE: 65 / population["België"] * population["Vlaanderen"], RED: 150 / population["België"] * population["Vlaanderen"], LIMIT: limit * population.Vlaanderen}); result.push({DATE: date, PROVINCE: "Wallonië", OLD_PROVINCE: "Wallonië", CASES: wal, NORMAL: 1000000 * wal / population["Wallonië"], ORANGE: 65 / population["België"] * population["Wallonië"], RED: 150 / population["België"] * population["Wallonië"], LIMIT: limit * population.Wallonië}); result.push({DATE: date, PROVINCE: "België", OLD_PROVINCE: "België", CASES: vl + wal + bru + un, NORMAL: 1000000 * (vl + wal + bru + un) / population["België"], ORANGE: 65, RED: 150, LIMIT: limit * population.België}); }); return result; }3a:[] 2f:{"title":"Hospitalisaties","cells":[{"id":0,"value":"md`# Hospitalisaties`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1422,"value":"md`Nieuwe opnames per dag sinds maart:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1425,"value":"md`Nieuwe opnames per dag sinds juni:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"viewof province = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1527,"value":"md`Patiënten in het ziekenhuis sinds juni:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"viewof province_patients = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1487,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"md`Patiënten op intensieve zorgen sinds juni:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1520,"value":"viewof province_patients_ICU = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1518,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1695,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"md`Hospitalisaties per provincie sinds begin:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"{\n // here we use the facet feature of vega to create subplots of each of the values of a data field\n const dots = vl.markCircle()\n .encode(\n vl.x().fieldT(\"DATE\"),\n vl.y().sum(\"CASES\"),\n vl.opacity().value(0.3)\n );\n \n const average = vl.markLine({interpolate: \"monotone\"})\n .transform(\n vl.groupby(\"PROVINCE\").window(vl.mean(\"CASES\").as(\"ROLLING\")).frame([-6,0])\n )\n .encode(\n vl.x().fieldT(\"DATE\").title(null),\n vl.y().sum(\"ROLLING\").title('Nieuwe hospitalisaties per dag')\n );\n \n /*return vl.layer(dots, average)\n .width(150).height(150)\n .facet(vl.field('PROVINCE')).columns(4)\n .resolve({scale: {x: 'independent'}}) \n .data(hospitalisations.filter(d => d.PROVINCE !== \"België\" && d.PROVINCE !== \"Vlaanderen\" && d.PROVINCE !== \"Wallonië\" && d.PROVINCE !== undefined))\n .render()*/\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"md`**Aantal nieuwe opnames per provincie**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1613,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"md`**Calculate hospitalisations**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"raw_hospitalisations = (await fetch('https://epistat.sciensano.be/Data/COVID19BE_HOSP.json?date=${today}')).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"hospitalisationsMax = {\n let result = Array.from(hospitalisations.filter(d => new Date(d.DATE) >= new Date(\"2021-10-01\")));\n const max = Math.max(20, Math.ceil(d3.max(result.map(d => d.NORMAL))));\n result.forEach(d => { d.MAX = max * population[d.OLD_PROVINCE] / 1000000});\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1435,"value":"purple = \"#66023C\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"national_hospitalisations = {\n const result = [];\n const grouped = d3a.rollup(raw_hospitalisations, v => {\n return {\n DATE : v[0].DATE,\n NEW_IN : d3.sum(v, d => d.NEW_IN),\n NEW_OUT : d3.sum(v, d => d.NEW_OUT),\n TOTAL_IN : d3.sum(v, d => d.TOTAL_IN),\n TOTAL_IN_ECMO : d3.sum(v, d => d.TOTAL_IN_ECMO),\n TOTAL_IN_ICU : d3.sum(v, d => d.TOTAL_IN_ICU),\n TOTAL_IN_RESP : d3.sum(v, d => d.TOTAL_IN_RESP),\n };\n }, d => d.DATE);\n return Array.from(grouped.values());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"hospi_dates = Array.from(new Set(raw_hospitalisations.map(c => c.DATE))).filter(d => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"provinces = Array.from(new Set(raw_hospitalisations.map(c => c.PROVINCE)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"cleanProvinces = provinces.map(d => names[d])","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"extendedProvinces = new Array(...provinces, \"Vlaanderen\", \"Wallonië\", \"België\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"population = {\n return {\n Antwerpen: 1872841,\n Brussels: 1214550,\n Liège: 1107937,\n Limburg: 879933,\n OostVlaanderen: 1530773,\n VlaamsBrabant: 1161430,\n WestVlaanderen: 1202529,\n BrabantWallon: 407377,\n Hainaut: 1344483,\n Namur: 496795,\n Luxembourg: 288515,\n Vlaanderen: 6647506,\n Wallonië: 3645243,\n België: 11507163,\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1194,"value":"names = {\n return {\n Antwerpen: \"Antwerpen\",\n Brussels: \"Brussel\",\n Liège: \"Luik\",\n Limburg: \"Limburg\",\n OostVlaanderen: \"Oost-Vlaanderen\",\n VlaamsBrabant: \"Vlaams-Brabant\",\n WestVlaanderen: \"West-Vlaanderen\",\n BrabantWallon: \"Waals-Brabant\",\n Hainaut: \"Henegouwen\",\n Namur: \"Namen\",\n Luxembourg: \"Luxemburg\",\n Vlaanderen: \"Vlaanderen\",\n Wallonië: \"Wallonië\",\n België: \"België\",\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1584,"value":"limit = 75 / population.België","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"limits = {\n const result = [];\n for (const [prov, pop] of Object.entries(population)) {\n result.push({PROVINCE: prov, ORANGE: 5 * pop / 1000000, RED: 15 * pop / 1000000});\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"d3a = require(\"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}