visualizationvega-litetimeserieschart

Creating a Horizontal State/StatusBar in Vega-Lite

I have been trying to use rectangles to shade a region of the 'state' of something over a time period. This application is for a time series database with information like:

{ "time": <time>, "value": 1 },
{ "time": <time>, "value": 1 },
{ "time": <time>, "value": 0 },
{ "time": <time>, "value": 0 },
{ "time": <time>, "value": 0 },
{ "time": <time>, "value": 1 },
{ "time": <time>, "value": 1 },
{ "time": <time>, "value": 0 },
{ "time": <time>, "value": 0 },
{ "time": <time>, "value": 0 },
{ "time": <time>, "value": 2 },
{ "time": <time>, "value": 2 }

Bar charts work for the time spent in a state, but not correlating the state to the time.

Something like this. Run Status Bar Chart

I haven't seen this functionality yet, or been able to make it work, is it possible?

Edit for clarity:

Picture a washing machine (Off, On, Spin, Rinse, etc). Each of these states corresponds to a number (1,2,3,4....). When the state changes(or polled over a regular interval), that value is logged to a time series database.

I would like to represent the state of the washing machine along a horizontal bar with the time along the X axis.

I've tested with this, but it wont render any information

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "data": {
    "values": [
      {"state": 0, "time": "2019-10-01"},
      {"state": 2, "time": "2019-10-02"},
      {"state": 0, "time": "2019-10-03"},
      {"state": 1, "time": "2019-10-04"},
      {"state": 0, "time": "2019-10-05"},
      {"state": 0, "time": "2019-10-06"},
      {"state": 1, "time": "2019-10-07"}
      ]
  },
  "mark": {
    "type": "bar"
  },
  "config": {
    "axis": {
      "labels": true,
      "domain": true,
      "ticks": false,
      "grid": false
    },
    "view": {
      "fill": "transparent",
      "stroke": "transparent"
    },
    "scale": {
      "bandPaddingInner": 0
    }
  },
  "encoding": {
    "x": {
      "field": "time",
      "type": "ordinal",
      "axis": true
    },
    "y": {
      "field": "state",
      "type": "ordinal",
      "scale": {
        "domain": []
      },
      "axis": true
    },
    "color": {
      "field": "state", "type": "ordinal",
      "legend": true,
      "scale": {
        "domain": [0,1,2],
        "range": ["#BD0000","#8DB319","#29ABE2"]
      }
    }
  }
}

This is what I get with the above.

enter image description here

Solution

  • You mean like this?

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"state": 0, "time": "2019-10-01"},
      {"state": 2, "time": "2019-10-02"},
      {"state": 0, "time": "2019-10-03"},
      {"state": 1, "time": "2019-10-04"},
      {"state": 0, "time": "2019-10-05"},
      {"state": 0, "time": "2019-10-06"},
      {"state": 1, "time": "2019-10-07"}
    ]
  },
  "mark": "bar",
  "encoding": {"x": {"field": "time"}, "color": {"field": "state"}},
  "config": {
    "axis": {"labels": true, "domain": true, "ticks": false, "grid": false},
    "view": {"fill": "transparent", "stroke": "transparent"},
    "scale": {"bandPaddingInner": 0}
  }
}