Vega Timeline

vega_timeline.json

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 1000,
  "height": 300,
  "padding": 5,
  "data": [
    {
      "name": "events",
      "values": [
        {
          "label": "PROCESSING INVERTER CLASSES",
          "start": 1539926595,
          "end": 1539926595
        },
        {
          "label": "PROCESSING INVERTER IMAGES 1",
          "start": 1539926595,
          "end": 1540018892
        },
        {
          "label": "PROCESSING INVERTER IMAGES 2",
          "start": 1540018892,
          "end": 1540108924
        },
        {
          "label": "BALANCING DATASET",
          "start": 1540108924,
          "end": 1540219894
        },
        {
          "label": "AUGMENTING DATASET",
          "start": 1540219894,
          "end": 1540258328
        },
        {
          "label": "PARTITIONING DATASET 1",
          "start": 1540258328,
          "end": 1540258338
        },
        {
          "label": "PARTITIONING DATASET 2",
          "start": 1540258338,
          "end": 1540258348
        },
        {
          "label": "CALCULATING DATASET STATS",
          "start": 1540258348,
          "end": 1540272255
        },
        {
          "label": "TRAINING CONVOLUTIONAL NEURAL NETWORK",
          "start": 1540272255,
          "end": 1542023032
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "range": [0, {"signal": "height"}],
      "domain": {"data": "events", "field": "label"}
    },
    {
      "name": "xscale",
      "type": "time",
      "range": "width",
      "round": true,
      "domain": {"data": "events", "fields": ["start", "end"]}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "xscale", "format": "%s"}
  ],

  "marks": [
    {
      "type": "text",
      "from": {"data": "events"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "start"},
          "y": {"scale": "yscale", "field": "label", "offset": -3},
          "fill": {"value": "#000"},
          "text": {"field": "label"},
          "fontSize": {"value": 10}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "events"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "start"},
          "x2": {"scale": "xscale", "field": "end"},
          "y": {"scale": "yscale", "field": "label"},
          "height": {"value": 2},
          "fill": {"value": "#557"}
        }
      }
    }
  ]
}