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

JavaScript

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.xLabel("day"),
    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
  xLabel: day
  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"
        }
      ],
      "xLabel": "day",
      "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
          ]
        }
      ]
    }
  ]
}