Reputation: 69
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