Vega-lite timeseries chart that overlays current, last year and average in a cyclical way - plot

Question

I have a simple timeseries with a price over time: [{t:"2023-01-31", price: 100}, ...].
With vega-lite.js I can easily plot this as a line.
The script for that is here.
But, I'd like to show such data by month with 3 lines.
One line shows the data of last year.
One line showing last year
One with the average price of the last 5 years.
Something like this:
This allows a more compact and intuitive reading in some cases. The months wrap around, so the x-axis always has the same size. Comparing the current, with past situations is easier, because the lines are overlaid.
I have tried to
create additional columns with transform, to distinguish those three
use {"timeUnit": "month"}, {"aggregate": "mean"} options to reorganize my axis
... but without success.
What is the right way to go about this in an elegant Vega-way?

Answer 1

Here you go.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 600,
"encoding": {
"x": {
"field": "month",
"axis": {"labelExpr": "monthAbbrevFormat(datum.value)", "labelAngle": 0}
},
"y": {"field": "price", "type": "quantitative"},
"tooltip": [
{"field": "t", "type": "temporal", "title": "t"},
{"field": "p", "type": "quantitative", "title": "price"}
],
"color": {
"field": "null",
"title": "series",
"scale": {
"domain": ["2021", "2022", "Ave 2016-2021"],
"range": ["red", "orange", "blueviolet"]
},
"type": "ordinal"
}
},
"layer": [
{
"mark": {"type": "line", "stroke": "red"},
"transform": [{"filter": "datum.year ==2021"}]
},
{
"mark": {"type": "line", "stroke": "orange"},
"transform": [{"filter": "datum.year ==2020"}]
},
{
"mark": {"type": "line", "stroke": "blueviolet", "interpolate": "basis"},
"transform": [
{"filter": "datum.year <= 2021 && datum.year >= 2016"},
{
"aggregate": [{"op": "mean", "field": "price", "as": "price"}],
"groupby": ["month"]
}
]
}
],
"data": {
"values": [
{"t": "2021-06-01T00:00:00", "price": 500},
{"t": "2012-12-01T00:00:00", "price": 130},
{"t": "2012-02-01T00:00:00", "price": 153},
{"t": "2020-05-01T00:00:00", "price": 400},
{"t": "2015-08-01T00:00:00", "price": 170},
{"t": "2015-01-01T00:00:00", "price": 140},
{"t": "2014-11-01T00:00:00", "price": 130},
{"t": "2009-08-01T00:00:00", "price": 110},
{"t": "2012-03-01T00:00:00", "price": 130},
{"t": "2019-11-01T00:00:00", "price": 400},
{"t": "2017-09-01T00:00:00", "price": 180},
{"t": "2009-10-01T00:00:00", "price": 220},
{"t": "2014-07-01T00:00:00", "price": 146},
{"t": "2015-03-01T00:00:00", "price": 160},
{"t": "2012-06-01T00:00:00", "price": 160},
{"t": "2018-05-01T00:00:00", "price": 220},
{"t": "2016-11-01T00:00:00", "price": 195},
{"t": "2019-10-01T00:00:00", "price": 400},
{"t": "2011-02-01T00:00:00", "price": 130},
{"t": "2021-03-01T00:00:00", "price": 500},
{"t": "2019-02-01T00:00:00", "price": 317.5},
{"t": "2012-09-01T00:00:00", "price": 140},
{"t": "2018-08-01T00:00:00", "price": 250},
{"t": "2015-11-01T00:00:00", "price": 186},
{"t": "2010-05-01T00:00:00", "price": 120},
{"t": "2010-02-01T00:00:00", "price": 130},
{"t": "2010-09-01T00:00:00", "price": 150},
{"t": "2017-10-01T00:00:00", "price": 180},
{"t": "2018-01-01T00:00:00", "price": 200},
{"t": "2020-02-01T00:00:00", "price": 400},
{"t": "2020-07-01T00:00:00", "price": 375},
{"t": "2018-06-01T00:00:00", "price": 232.5},
{"t": "2019-04-01T00:00:00", "price": 322.5},
{"t": "2014-02-01T00:00:00", "price": 130},
{"t": "2016-01-01T00:00:00", "price": 143},
{"t": "2019-07-01T00:00:00", "price": 400},
{"t": "2014-12-01T00:00:00", "price": 135},
{"t": "2009-05-01T00:00:00", "price": 110},
{"t": "2020-03-01T00:00:00", "price": 330},
{"t": "2019-09-01T00:00:00", "price": 400},
{"t": "2013-02-01T00:00:00", "price": 135},
{"t": "2009-12-01T00:00:00", "price": 150},
{"t": "2017-07-01T00:00:00", "price": 195},
{"t": "2020-10-01T00:00:00", "price": 400},
{"t": "2016-10-01T00:00:00", "price": 205},
{"t": "2015-07-01T00:00:00", "price": 180},
{"t": "2018-03-01T00:00:00", "price": 200},
{"t": "2012-05-01T00:00:00", "price": 165},
{"t": "2013-10-01T00:00:00", "price": 135},
{"t": "2012-10-01T00:00:00", "price": 130},
{"t": "2016-07-01T00:00:00", "price": 150},
{"t": "2011-08-01T00:00:00", "price": 200},
{"t": "2019-03-01T00:00:00", "price": 320},
{"t": "2017-08-01T00:00:00", "price": 180},
{"t": "2013-06-01T00:00:00", "price": 135},
{"t": "2015-05-01T00:00:00", "price": 153},
{"t": "2020-09-01T00:00:00", "price": 460},
{"t": "2014-06-01T00:00:00", "price": 140},
{"t": "2011-06-01T00:00:00", "price": 145},
{"t": "2018-12-01T00:00:00", "price": 300},
{"t": "2021-02-01T00:00:00", "price": 450},
{"t": "2017-03-01T00:00:00", "price": 210},
{"t": "2015-04-01T00:00:00", "price": 190}
]
},
"transform": [
{"calculate": "year(datum.t)", "as": "year"},
{"calculate": "month(datum.t)", "as": "month"}
]
}