jsonvisualizationvega-litevega

How we can plot week over week overlay in vega lite?


I am trying to create a chart via vega lite where I want to plot two lines, where one line represents the actual data value and the other line should display the values of one week earlier i.e week over week overlay.

For instance the input data is like below:

Date daily_total_viewer
2025-01-20 100
2025-01-19 200
2025-01-18 300
2025-01-17 400
2025-01-16 500
2025-01-15 600
2025-01-14 700
2025-01-13 900
2025-01-12 1000
2025-01-11 1100

Then the transformed data that should be produced by vega lite should look like below:

Date daily_total_viewer WoW daily_total_viewer
2025-01-20 100 900
2025-01-19 200 1000
2025-01-18 300 1100
2025-01-17 400
2025-01-16 500
2025-01-15 600
2025-01-14 700
2025-01-13 900
2025-01-12 1000
2025-01-11 1100

For achieving this kind of behaviour using vega lite spec, currently I am using the lookup transformation. Please refer to the spec below:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "2025-01-20", "daily_total_viewer": 100},
      {"date": "2025-01-19", "daily_total_viewer": 200},
      {"date": "2025-01-18", "daily_total_viewer": 300},
      {"date": "2025-01-17", "daily_total_viewer": 400},
      {"date": "2025-01-16", "daily_total_viewer": 500},
      {"date": "2025-01-15", "daily_total_viewer": 600},
      {"date": "2025-01-14", "daily_total_viewer": 700},
      {"date": "2025-01-13", "daily_total_viewer": 900},
      {"date": "2025-01-12", "daily_total_viewer": 1000},
      {"date": "2025-01-11", "daily_total_viewer": 1100}
    ]
  },
  "transform": [
    {
      "calculate": "datetime(datum.date) - 7 * 24 * 60 * 60 * 1000",
      "as": "previous_week_date"
    },
    {
      "lookup": "previous_week_date",
      "from": {
        "data": {
          "values": [
            {"date": "2025-01-20", "daily_total_viewer": 100},
            {"date": "2025-01-19", "daily_total_viewer": 200},
            {"date": "2025-01-18", "daily_total_viewer": 300},
            {"date": "2025-01-17", "daily_total_viewer": 400},
            {"date": "2025-01-16", "daily_total_viewer": 500},
            {"date": "2025-01-15", "daily_total_viewer": 600},
            {"date": "2025-01-14", "daily_total_viewer": 700},
            {"date": "2025-01-13", "daily_total_viewer": 900},
            {"date": "2025-01-12", "daily_total_viewer": 1000},
            {"date": "2025-01-11", "daily_total_viewer": 1100}
          ]
        },
        "key": "date",
        "fields": ["daily_total_viewer"]
      },
      "as": ["WOW_daily_total_viewer"]
    }
  ],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "title": "Date"},
        "y": {"field": "daily_total_viewer", "type": "quantitative"},
        "color": {"value": "blue", "title": "Current Week"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "title": "Date"},
        "y": {"field": "WOW_daily_total_viewer", "type": "quantitative"},
        "color": {"value": "orange", "title": "Previous Week"}
      }
    }
  ]
}

Can we achieve the same behavior without using lookup with some easy transformations via vega lite?


Solution

  • Here it is using a simpler window transform.

      {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {
        "values": [
          {"date": "2025-01-20", "daily_total_viewer": 100},
          {"date": "2025-01-19", "daily_total_viewer": 200},
          {"date": "2025-01-18", "daily_total_viewer": 300},
          {"date": "2025-01-17", "daily_total_viewer": 400},
          {"date": "2025-01-16", "daily_total_viewer": 500},
          {"date": "2025-01-15", "daily_total_viewer": 600},
          {"date": "2025-01-14", "daily_total_viewer": 700},
          {"date": "2025-01-13", "daily_total_viewer": 900},
          {"date": "2025-01-12", "daily_total_viewer": 1000},
          {"date": "2025-01-11", "daily_total_viewer": 1100}
        ]
      },
      "transform": [
        {
          "sort": [{"field": "date"}],
          "window": [
            {
              "op": "lag",
              "param": 7,
              "field": "daily_total_viewer",
              "as": "WOW_daily_total_viewer"
            }
          ],
          "frame": [null, 0]
        }
      ],
      "layer": [
        {
          "mark": "line",
          "encoding": {
            "x": {"field": "date", "type": "temporal", "title": "Date"},
            "y": {"field": "daily_total_viewer", "type": "quantitative"},
            "color": {"value": "blue", "title": "Current Week"}
          }
        },
        {
          "mark": "line",
          "encoding": {
            "x": {"field": "date", "type": "temporal", "title": "Date"},
            "y": {"field": "WOW_daily_total_viewer", "type": "quantitative"},
            "color": {"value": "orange", "title": "Previous Week"}
          }
        }
      ]
    }