CODEWITHSUNDEEP
vega-litevega
llermaly
llermaly

Reputation: 2510

Vega lite plot state transition in a day

I need to plot the state transition of different agents in a 24h span. I can visualize the transitions:

enter image description here

But I need this to be a 24h span (from 00:00 to 00:00 of the next day)

I tried adding scaling:

"timeUnit": "hours",
"scale": {"domain": [{"hours": 0}, {"hours": 24}]}

And now I see the time span in my X axis, but the visualization is broken:

enter image description here

This is my code in Vega Lite Editor

Thanks

Upvotes: 0

Views: 115

Answers (1)

llermaly
llermaly

Reputation: 2510

I was missing the timeUnit in the x2 axis, also setting it to ucthours fixes the time difference.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A status timeline",
  "data": {
    "values": [
      {
        "agent": "sarah",
        "start": "2023-01-13T10:36:53.937Z",
        "status": "Transition",
        "end": "2023-01-13T11:38:53.937Z"
      },
      {
        "agent": "sarah",
        "start": "2023-01-13T11:38:53.937Z",
        "status": "Offline",
        "end": "2023-01-13T15:39:53.937Z"
      },
      {
        "agent": "sarah",
        "start": "2023-01-13T15:39:53.937Z",
        "status": "Online",
        "end": "2023-01-13T16:40:26.637Z"
      },
      {
        "agent": "sarah",
        "start": "2023-01-13T16:40:26.637Z",
        "status": "Training",
        "end": "2023-01-13T18:45:26.637Z"
      },
      {
        "agent": "gustavo",
        "start": "2023-01-13T07:36:53.937Z",
        "status": "Transition",
        "end": "2023-01-13T08:38:53.937Z"
      },
      {
        "agent": "gustavo",
        "start": "2023-01-13T08:38:53.937Z",
        "status": "Offline",
        "end": "2023-01-13T10:39:53.937Z"
      },
      {
        "agent": "gustavo",
        "start": "2023-01-13T10:39:53.937Z",
        "status": "Online",
        "end": "2023-01-13T12:40:26.637Z"
      },
      {
        "agent": "gustavo",
        "start": "2023-01-13T12:40:26.637Z",
        "status": "Training",
        "end": "2023-01-13T14:45:26.637Z"
      }
    ]
  },
  "mark": "rect",
  "encoding": {
    "y": {"field": "agent"},
    "x": {
      "axis": {"title": "Status Timeline"},
      "field": "start",
      "type": "temporal",
      "timeUnit": "utchours",
      "scale": {
        "domain": [{"hours": 0}, {"hours": 24}],
        "padding": 0
      }
      
    },
    "x2": {"field": "end", "timeUnit": "utchours"},
    "color": {"field": "status", "type": "nominal"}
  }
}

Upvotes: 1

Related Questions