7.2.1 Understanding Time Series Data

Code

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Time Series Components with Trend, Seasonality, Cyclical Patterns, and Random Fluctuations",
  "data": {
    "sequence": {
      "start": 0,
      "stop": 50,
      "step": 1,
      "as": "x"
    }
  },
  "transform": [
    {
      "calculate": "0.5 * datum.x + 10",
      "as": "trend"
    },
    {
      "calculate": "2 * sin(2 * PI * datum.x / 10)",
      "as": "seasonality"
    },
    {
      "calculate": "sin(datum.x / 5)",
      "as": "cyclical"
    },
    {
      "calculate": "datum.trend + datum.seasonality + datum.cyclical",
      "as": "value"
    },
    {
      "calculate": "sampleNormal(0, 1)",
      "as": "random"
    }
  ],
  "hconcat": [
    {
      "title": "Trend Component",
      "mark": "line",
      "encoding": {
        "x": {
          "field": "x",
          "type": "quantitative",
          "title": "Time"
        },
        "y": {
          "field": "trend",
          "type": "quantitative",
          "title": "Value"
        },
        "color": {
          "value": "blue"
        }
      }
    },
    {
      "title": "Seasonality Component",
      "mark": "line",
      "encoding": {
        "x": {
          "field": "x",
          "type": "quantitative",
          "title": "Time"
        },
        "y": {
          "field": "seasonality",
          "type": "quantitative",
          "title": "Value"
        },
        "color": {
          "value": "green"
        }
      }
    },
    {
      "title": "Cyclical Component",
      "mark": "line",
      "encoding": {
        "x": {
          "field": "x",
          "type": "quantitative",
          "title": "Time"
        },
        "y": {
          "field": "cyclical",
          "type": "quantitative",
          "title": "Value"
        },
        "color": {
          "value": "orange"
        }
      }
    },
    {
      "title": "Random Fluctuations",
      "mark": "line",
      "encoding": {
        "x": {
          "field": "x",
          "type": "quantitative",
          "title": "Time"
        },
        "y": {
          "field": "random",
          "type": "quantitative",
          "title": "Value"
        },
        "color": {
          "value": "red"
        }
      }
    }
  ]
}

7.2.1 Understanding Time Series Data

Code

Vega-Lite Chart