Moving Average
This plot shows daily reported COVID-19 cases from March 3 (day 1) to May 5, 2020 (day 64) in Berlin, Germany, as reported by the Robert Koch Institute. We can smooth the raw counts using a moving average over various choices of window query frames.
Loading Example... ⏳
Credit: Adapted from the Arquero window query tutorial.
Specification
js
import * as vg from "@uwdata/vgplot";
await vg.coordinator().exec([
vg.loadParquet("cases", "data/berlin-covid.parquet")
]);
const $frame = vg.Param.array([-6, 0]);
export default vg.vconcat(
vg.plot(
vg.rectY(
vg.from("cases"),
{x1: "day", x2: vg.sql`day + 1`, inset: 1, y: "cases", fill: "steelblue"}
),
vg.lineY(
vg.from("cases"),
{
x: vg.sql`day + 0.5`,
y: vg.avg("cases").orderby("day").rows($frame),
curve: "monotone-x",
stroke: "currentColor"
}
),
vg.width(680),
vg.height(300)
),
vg.menu({
label: "Window Frame",
as: $frame,
options: [
{label: "7-day moving average, with prior 6 days: [-6, 0]", value: [-6, 0]},
{
label: "7-day moving average, centered at current day: [-3, 3]",
value: [-3, 3]
},
{label: "Moving average, with all prior days [-∞, 0]", value: [null, 0]},
{label: "Global average [-∞, +∞]", value: [null, null]}
]
})
);
yaml
meta:
title: Moving Average
description: >
This plot shows daily reported COVID-19 cases from March 3 (day 1) to May 5, 2020 (day 64)
in Berlin, Germany, as reported by the [Robert Koch Institute](https://www.rki.de/DE/Content/InfAZ/N/Neuartiges_Coronavirus/nCoV.html).
We can smooth the raw counts using a moving average over various choices of window query frames.
credit: Adapted from the [Arquero window query tutorial](https://observablehq.com/@uwdata/working-with-window-queries).
data:
cases: { file: data/berlin-covid.parquet }
params:
frame: [-6, 0]
vconcat:
- plot:
- mark: rectY
data: { from: cases }
x1: day
x2: { sql: day + 1 }
inset: 1
y: cases
fill: steelblue
- mark: lineY
data: { from: cases }
x: { sql: day + 0.5 } # place value at mid-day
y: { avg: cases, orderby: day, rows: $frame }
curve: monotone-x
stroke: currentColor
width: 680
height: 300
- input: menu
label: Window Frame
as: $frame
options:
- { label: '7-day moving average, with prior 6 days: [-6, 0]', value: [-6, 0] }
- { label: '7-day moving average, centered at current day: [-3, 3]', value: [-3, 3] }
- { label: 'Moving average, with all prior days [-∞, 0]', value: [null, 0] }
- { label: 'Global average [-∞, +∞]', value: [null, null] }
json
{
"meta": {
"title": "Moving Average",
"description": "This plot shows daily reported COVID-19 cases from March 3 (day 1) to May 5, 2020 (day 64) in Berlin, Germany, as reported by the [Robert Koch Institute](https://www.rki.de/DE/Content/InfAZ/N/Neuartiges_Coronavirus/nCoV.html). We can smooth the raw counts using a moving average over various choices of window query frames.\n",
"credit": "Adapted from the [Arquero window query tutorial](https://observablehq.com/@uwdata/working-with-window-queries)."
},
"data": {
"cases": {
"file": "data/berlin-covid.parquet"
}
},
"params": {
"frame": [
-6,
0
]
},
"vconcat": [
{
"plot": [
{
"mark": "rectY",
"data": {
"from": "cases"
},
"x1": "day",
"x2": {
"sql": "day + 1"
},
"inset": 1,
"y": "cases",
"fill": "steelblue"
},
{
"mark": "lineY",
"data": {
"from": "cases"
},
"x": {
"sql": "day + 0.5"
},
"y": {
"avg": "cases",
"orderby": "day",
"rows": "$frame"
},
"curve": "monotone-x",
"stroke": "currentColor"
}
],
"width": 680,
"height": 300
},
{
"input": "menu",
"label": "Window Frame",
"as": "$frame",
"options": [
{
"label": "7-day moving average, with prior 6 days: [-6, 0]",
"value": [
-6,
0
]
},
{
"label": "7-day moving average, centered at current day: [-3, 3]",
"value": [
-3,
3
]
},
{
"label": "Moving average, with all prior days [-∞, 0]",
"value": [
null,
0
]
},
{
"label": "Global average [-∞, +∞]",
"value": [
null,
null
]
}
]
}
]
}