Raghav Mittal
Raghav Mittal

Reputation: 69

How we can plot quarter over quarter 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 quarter earlier i.e quarter over quarter 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
2024-10-20 500
2024-10-19 600
2024-10-18 700
2024-10-17 900
2024-10-16 1000
2024-10-15 1100

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

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

For achieving the above kind of transformations and plot it what should be the vega lite spec?

For WOW below is the one which is working fine.

{
  "$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"}
      }
    }
  ]
}

I am not sure how we can get it work for the quarter by quarter as in that case we can't fix the param value in the window to some constant. Could anyone please help?

Upvotes: 0

Views: 17

Answers (0)

Related Questions