Vega lite heatmap incorrect with multi line calculated field

Question

I have plotted a simple heatmap (minimal example Open the Chart in the Vega Editor ) which initially appeared correct.

Many labels were very long so I added the transform {"calculate": "split(datum.description, ' ')", "as": "description2"} to split labels into new lines on the space character (description being the field mapped to the x axis).

However the plot is now incorrect. In the linked spec, if you change the encoding of x from "field": "description2" to "field": "description" the entire plot changes. Many items with description of One do not plot correctly when using field description2 (the calculated field) but do when using field description.

Why does the calculated field break the plot, and is there an alternative way to deal with long labels?

Answer 1

Use a labelExpr. The calculated field is breaking the plot because you're passing an array as a field value.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"status": "Negative", "description": "Example 2", "form": "HEY_MI"},
      {"status": "Negative", "description": "Example 2", "form": "VOV_MI"},
      {"status": "Negative", "description": "One", "form": "ZAYIN_TE"},
      {"status": "Negative", "description": "Example 2", "form": "HEY_MI"},
      {"status": "Negative", "description": "One", "form": "HEY_TO"},
      {"status": "Negative", "description": "One", "form": "ZAYIN_TO"}
    ]
  },
  "mark": {"type": "rect", "tooltip": true},
  "encoding": {
    "x": {
      "field": "description",
      "axis": {"labelAngle": -90, "labelExpr": "split(datum.label, ' ')"}
    },
    "y": {"field": "form", "title": "Form"},
    "color": {"aggregate": "count", "title": "No. of incidents"}
  }
}