viz table string data graphically - simple

vega-viz-table-strings.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 600,
  "height": 200,
  "padding": 5,
  "background": "white",
  "data": [
    {
      "name": "table",
      "values": [
        {"device": "Device 1", "status": "up", "comment": "Lorem ipsum dolor"},
        {
          "device": "Device 2",
          "status": "down",
          "comment": "Sit amet consectetur"
        },
        {"device": "Device 3", "status": "up", "comment": "Adipiscing elit"},
        {"device": "Device 4", "status": "down", "comment": "Sed do eiusmod"},
        {
          "device": "Device 5",
          "status": "up",
          "comment": "Tempor incididunt ut"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "yScale",
      "type": "band",
      "domain": {"data": "table", "field": "device"},
      "range": "height",
      "padding": 0.2
    },
    {
      "name": "statusColor",
      "type": "ordinal",
      "domain": ["up", "down"],
      "range": ["green", "red"]
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"value": 0},
          "width": {"signal": "width"},
          "y": {"scale": "yScale", "field": "device"},
          "height": {"signal": "bandwidth('yScale')"},
          "fill": {"value": "#f0f0f0"},
          "stroke": {"value": "lightgray"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"value": 10},
          "y": {"scale": "yScale", "field": "device", "band": 0.5},
          "text": {"field": "device"},
          "fontSize": {"value": 14},
          "fill": {"value": "black"},
          "align": {"value": "left"},
          "baseline": {"value": "middle"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"signal": "width * 0.4"},
          "y": {"scale": "yScale", "field": "device", "band": 0.5},
          "text": {"field": "status"},
          "fontSize": {"value": 14},
          "fill": {"scale": "statusColor", "field": "status"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"signal": "width * 0.6"},
          "y": {"scale": "yScale", "field": "device", "band": 0.5},
          "text": {"field": "comment"},
          "fontSize": {"value": 14},
          "fill": {"value": "black"},
          "align": {"value": "left"},
          "baseline": {"value": "middle"}
        }
      }
    }
  ]
}