Vega Visualization timeunit hoursminutes wrong order

Question

I have the following issue:

Everyday I have runs that are executed from a certain timestamp till another one. I want to show every run (beginning and end) on the same graph. I have the following code as test setup.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "Customizing time scale domain.",
  "data": {
    "values": [
      {
        "a": "December 17, 2020 15:40:00",
        "b": 5,
        "c": "December 18, 2020 01:40:00"
      },
      {
        "a": "December 18, 2020 22:10:00",
        "b": 30,
        "c": "December 19, 2020 06:10:00"
      }
    ]
  },
  "mark": "rule",
  "encoding": {
    "x": {
      "timeUnit": "hoursminutes",
      "field": "a",
      "type": "temporal",
      "axis": {"title": "hours"}
    },
    "x2": {"timeUnit": "hoursminutes", "field": "c", "type": "temporal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}

When displaying the graph the values of a and c are switched (because the axis only goes from 00:00 - 23:59). I could use yearmonthdatehoursminutes as timeunit instead of hoursminutes but i only care about the hours a process starts and when they end. Does anyone have some ideas how to tackle this issue?

PS: Vega online editor

Follow up question: What about the following situation here

In this case we have multiple jobs per execution (= column b). Since jobs can run during midnight and the second job starts after midnight they get displayed wrong. Any idea how to tackle this?

Thanks!

Answer 1

It sounds like the best approach would be to normalize your data based on the starting date, and then adjust the axis to show only hours and minutes. You can do this with the combination of a timeUnit transform, a calculate transform, and an axis format specified via a d3 time format.

Here is an example (open in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "Customizing time scale domain.",
  "data": {
    "values": [
      {
        "a": "December 17, 2020 15:40:00",
        "b": 5,
        "c": "December 18, 2020 01:40:00"
      },
      {
        "a": "December 18, 2020 22:10:00",
        "b": 30,
        "c": "December 19, 2020 06:10:00"
      }
    ]
  },
  "transform": [
    {"timeUnit": "hoursminutesseconds", "field": "a", "as": "a1"},
    {
      "calculate": "time(datum.a1) + (time(datum.c) - time(datum.a))",
      "as": "c1"
    }
  ],
  "mark": "rule",
  "encoding": {
    "x": {
      "field": "a1",
      "type": "temporal",
      "axis": {"title": "hour", "format": "%H:%M"}
    },
    "x2": {"field": "c1", "type": "temporal"},
    "y": {"field": "b", "type": "quantitative"}
  },
  "width": 600
}