Calculate time from given date and hour - vega-lite

Question

It seems to be a simple question, but there is surprisingly lack of documentation covering that basic transformation.
With a given data:
{"date": "2022-12-28", "hr": 10, "temp": 5.7},
{"date": "2022-12-28", "hr": 9, "temp": 5.0},
...and so on...
There is need to create datetime value.
Lets say We will try this transformation:
{"calculate": "time(datum.date + 'T' + datum.hr + ':00:00')", "as": "t"}
It works perfectly, but only for two-digit input (hr 10-23). Which gives as output:
data_0:
date hr temp t
"2022-12-28" 10 5.7 1672218000000
"2022-12-27" 23 2.2 1672178400000
"2022-12-27" 22 2.5 1672174800000
And clearly ignoring one digit integers.
Opposite, transformation:
{"calculate": "time(datum.date + 'T0' + datum.hr + ':00:00')", "as": "t"}
Will catch only one-digit integers, ignorig all the rest.
The question is: What vanilla Vega-Lite function should be used in this case.
Below is working Vega-Lite configuration:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Temp. hour by hour.",
"width": "container",
"data": {"values": [
{"date": "2022-12-28", "hr": 10, "temp": 5.7},
{"date": "2022-12-28", "hr": 9, "temp": 5.0},
{"date": "2022-12-28", "hr": 8, "temp": 3.8},
{"date": "2022-12-28", "hr": 7, "temp": 3.1},
{"date": "2022-12-28", "hr": 6, "temp": 2.7},
{"date": "2022-12-28", "hr": 5, "temp": 2.1},
{"date": "2022-12-28", "hr": 4, "temp": 1.9},
{"date": "2022-12-28", "hr": 3, "temp": -1.2},
{"date": "2022-12-28", "hr": 2, "temp": 1.0},
{"date": "2022-12-28", "hr": 1, "temp": 1.2},
{"date": "2022-12-28", "hr": 0, "temp": 1.5},
{"date": "2022-12-27", "hr": 23, "temp": 2.2},
{"date": "2022-12-27", "hr": 22, "temp": 2.5}
]},
"transform": [
{"calculate": "time(datum.date + 'T' + datum.hr + ':00:00')", "as": "t"}
],
"encoding": {
"x": {"field": "t", "type": "temporal", "title": "Time"},
"y": {"type": "quantitative", "axis": {"title": "Temp.[°C]"}}
},
"layer": [
{"mark": {"type": "circle", "opacity": 0.75, "tooltip": true},
"encoding": {
"y": {"field": "temp", "title": "Temp."},
"color": {"field": "temp", "type": "quantitative",
"scale": {"domainMid": 0, "scheme": "viridis"}, "title": "[°C]"}
}
}
]
}

Answer 1

You're best doing stuff like this upstream but you can still do it in Vega. e.g.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Temp. hour by hour.",
"width": "container",
"data": {
"values": [
{"date": "2022-12-28", "hr": 10, "temp": 5.7},
{"date": "2022-12-28", "hr": 9, "temp": 5},
{"date": "2022-12-28", "hr": 8, "temp": 3.8},
{"date": "2022-12-28", "hr": 7, "temp": 3.1},
{"date": "2022-12-28", "hr": 6, "temp": 2.7},
{"date": "2022-12-28", "hr": 5, "temp": 2.1},
{"date": "2022-12-28", "hr": 4, "temp": 1.9},
{"date": "2022-12-28", "hr": 3, "temp": -1.2},
{"date": "2022-12-28", "hr": 2, "temp": 1},
{"date": "2022-12-28", "hr": 1, "temp": 1.2},
{"date": "2022-12-28", "hr": 0, "temp": 1.5},
{"date": "2022-12-27", "hr": 23, "temp": 2.2},
{"date": "2022-12-27", "hr": 22, "temp": 2.5}
]
},
"transform": [
{
"calculate": " datetime(split(datum.date,'-')[0],split(datum.date,'-')[1],split(datum.date,'-')[2],datum.hr) ",
"as": "t"
}
],
"encoding": {
"x": {"field": "t", "type": "temporal", "title": "Time"},
"y": {"type": "quantitative", "axis": {"title": "Temp.[°C]"}}
},
"layer": [
{
"mark": {"type": "circle", "opacity": 0.75, "tooltip": true},
"encoding": {
"y": {"field": "temp", "title": "Temp."},
"color": {
"field": "temp",
"type": "quantitative",
"scale": {"domainMid": 0, "scheme": "viridis"},
"title": "[°C]"
}
}
}
]
}