Time-Based Moving Average

Moving averages of Apple stock prices, using range window frames that span 15 days (black) and 3 months (red) around each date.

Loading Example... ⏳

Specification

JavaScript

import * as vg from "@uwdata/vgplot";

await vg.coordinator().exec([
  vg.loadParquet("aapl", "data/stocks.parquet", {where: "Symbol = 'AAPL'"})
]);

export default vg.plot(
  vg.lineY(
    vg.from("aapl"),
    {stroke: "#ccc", x: "Date", y: "Close"}
  ),
  vg.lineY(
    vg.from("aapl"),
    {
      stroke: "black",
      x: "Date",
      y: vg.avg("Close").orderby("Date").frame(vg.frameRange([vg.days(15), vg.days(15)]))
    }
  ),
  vg.lineY(
    vg.from("aapl"),
    {
      stroke: "firebrick",
      x: "Date",
      y: vg.avg("Close").orderby("Date").frame(vg.frameRange([vg.months(3), vg.months(3)]))
    }
  ),
  vg.yLabel("Close"),
  vg.width(680),
  vg.height(200)
);

YAML

meta:
  title: Time-Based Moving Average
  description: >
    Moving averages of Apple stock prices, using `range` window frames that
    span 15 days (black) and 3 months (red) around each date.
data:
  aapl: { file: data/stocks.parquet, where: Symbol = 'AAPL' }
plot:
- mark: lineY
  data: { from: aapl }
  stroke: '#ccc'
  x: Date
  y: Close
- mark: lineY
  data: { from: aapl }
  stroke: black
  x: Date
  y: { avg: Close, orderby: Date, range: [{days: 15}, {days: 15}] }
- mark: lineY
  data: { from: aapl }
  stroke: firebrick
  x: Date
  y: { avg: Close, orderby: Date, range: [{months: 3}, {months: 3}] }
yLabel: Close
width: 680
height: 200

JSON

{
  "meta": {
    "title": "Time-Based Moving Average",
    "description": "Moving averages of Apple stock prices, using `range` window frames that span 15 days (black) and 3 months (red) around each date.\n"
  },
  "data": {
    "aapl": {
      "file": "data/stocks.parquet",
      "where": "Symbol = 'AAPL'"
    }
  },
  "plot": [
    {
      "mark": "lineY",
      "data": {
        "from": "aapl"
      },
      "stroke": "#ccc",
      "x": "Date",
      "y": "Close"
    },
    {
      "mark": "lineY",
      "data": {
        "from": "aapl"
      },
      "stroke": "black",
      "x": "Date",
      "y": {
        "avg": "Close",
        "orderby": "Date",
        "range": [
          {
            "days": 15
          },
          {
            "days": 15
          }
        ]
      }
    },
    {
      "mark": "lineY",
      "data": {
        "from": "aapl"
      },
      "stroke": "firebrick",
      "x": "Date",
      "y": {
        "avg": "Close",
        "orderby": "Date",
        "range": [
          {
            "months": 3
          },
          {
            "months": 3
          }
        ]
      }
    }
  ],
  "yLabel": "Close",
  "width": 680,
  "height": 200
}

Python

import vgplot as vg

aapl = vg.parquet("data/stocks.parquet", where="Symbol = 'AAPL'")

view = vg.plot(
    vg.line_y(aapl, stroke="#ccc", x="Date", y="Close"),
    vg.line_y(
        aapl,
        stroke="black",
        x="Date",
        y=vg.avg("Close", orderby="Date", range=[{"days": 15}, {"days": 15}]),
    ),
    vg.line_y(
        aapl,
        stroke="firebrick",
        x="Date",
        y=vg.avg("Close", orderby="Date", range=[{"months": 3}, {"months": 3}]),
    ),
    vg.y_label("Close"),
    vg.width(680),
    vg.height(200),
)