Calculate time from given date and hour

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