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?
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"}
}
}
]
}