Label Transform is not working in the most recent version of Vega

[anton-bulyenov]

Looks like Label Transform is broken in the most recent version of Vega.js — all labels get squished in the top left corner of the chart. The issue is reproducible both in editor and outside of it. I was able to see it in my spec as well as the example too.

The example below is a copy of Labeled Scatter Plot on Vega Editor https://vega.github.io/editor/#/examples/vega/labeled-scatter-plot

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A labeled scatter plot of films showing Rotten Tomatoes ratings versus IMDB ratings.",
  "padding": 5,
  "width": 800,
  "height": 600,
  "autosize": "pad",

  "data": [
    {
      "name": "movies",
      "url": "data/movies.json",
      "transform": [
        {
          "type": "filter",
          "expr": "datum['Rotten Tomatoes Rating'] != null && datum['IMDB Rating'] != null"
        }
      ]
    },
    {
      "name": "fit",
      "source": "movies",
      "transform": [
        {
          "type": "regression",
          "method": "quad",
          "x": "Rotten Tomatoes Rating",
          "y": "IMDB Rating",
          "as": ["u", "v"]
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": {"data": "movies", "field": "Rotten Tomatoes Rating"},
      "range": "width"
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "movies", "field": "IMDB Rating"},
      "range": "height"
    }
  ],

  "axes": [
    {"orient": "left", "scale": "y", "title": "IMDB Rating"},
    {"orient": "bottom", "scale": "x", "title": "Rotten Tomatoes Rating"}
  ],

  "marks": [
    {
      "name": "points",
      "type": "symbol",
      "from": {"data": "movies"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "Rotten Tomatoes Rating"},
          "y": {"scale": "y", "field": "IMDB Rating"},
          "size": {"value": 25},
          "fillOpacity": {"value": 0.5}
        }
      }
    },
    {
      "name": "trend",
      "type": "line",
      "from": {"data": "fit"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "u"},
          "y": {"scale": "y", "field": "v"},
          "stroke": {"value": "firebrick"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "points"},
      "encode": {
        "enter": {
          "text": {"field": "datum.Title"},
          "fontSize": {"value": 8}
        }
      },
      "transform": [
        {
          "type": "label",
          "avoidMarks": ["trend"],
          "anchor": ["top", "bottom", "right", "left"],
          "offset": [1],
          "size": {"signal": "[width + 60, height]"}
        }
      ]
    }
  ]
}

[jheer]

Thank you for sharing the issue. I'm unable to replicate the error on Vega 5.25: the example loads fine for me on the Vega website's gallery in both Firefox and Chrome on MacOS: https://vega.github.io/vega/examples/labeled-scatter-plot/

I am however able to see the same issue reported here in the Vega Editor (which claims to be using Vega 5.24). It is possible the issue was fixed between versions or there is perhaps a problem stemming from the editor application.

Can you test outside of the editor using Vega 5.25 and report back if you still see the error?

[anton-bulyenov]

I was able to confirm that this is a vega editor bug. I tried to switch between the versions of Vega.js (5.24 and 5.25) locally and the label issue is not happening.