Vega-lite: Accessing multiple fields with repeat in hconcat: Browser dependent error

[jwoLondon]

The following code, which reproduces the dashboard from your OpenVis 2017 conference talk works in Safari but not in Chrome , producing the error Error: Undefined data set name: "data_15"

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {
    "url": "data/seattle-weather.csv"
  },
  "vconcat": [
    {
      "hconcat": [
        {
          "repeat": {
            "row": [
              "temp_max",
              "precipitation",
              "wind"
            ],
            "column": [
              "wind",
              "precipitation",
              "temp_max"
            ]
          },
          "spec": {
            "mark": "point",
            "encoding": {
              "x": {
                "field": {
                  "repeat": "column"
                },
                "type": "quantitative"
              },
              "y": {
                "field": {
                  "repeat": "row"
                },
                "type": "quantitative"
              }
            }
          }
        },
        {
          "repeat": {
            "row": [
              "precipitation",
              "temp_max",
              "wind"
            ]
          },
          "spec": {
            "layer": [
              {
                "mark": "bar",
                "encoding": {
                  "x": {
                    "field": "date",
                    "type": "ordinal",
                    "timeUnit": "month"
                  },
                  "y": {
                    "field": {
                      "repeat": "row"
                    },
                    "type": "quantitative",
                    "aggregate": "mean"
                  }
                }
              },
              {
                "mark": "rule",
                "encoding": {
                  "y": {
                    "field": {
                      "repeat": "row"
                    },
                    "type": "quantitative",
                    "aggregate": "mean"
                  }
                }
              }
            ]
          }
        }
      ]
    },
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "field": "temp_max",
          "type": "quantitative",
          "bin": true
        },
        "y": {
          "aggregate": "count",
          "type": "quantitative"
        },
        "color": {
          "field": "weather",
          "type": "nominal",
          "legend": null,
          "scale": {
            "domain": [
              "sun",
              "fog",
              "drizzle",
              "rain",
              "snow"
            ],
            "range": [
              "#e7ba52",
              "#c7c7c7",
              "#aec7ea",
              "#1f77b4",
              "#9467bd"
            ]
          }
        },
        "column": {
          "field": "weather",
          "type": "nominal"
        }
      }
    }
  ]
}

The problem appears to be in the scatterplot matrix because if you replace the two lists of fields
"row": [ "temp_max","precipitation","wind"] and "column": ["wind", "precipitation","temp_max"] with lists that contain only one entry each, such as "row": [ "temp_max"] and "column": ["wind"], the specification works.

Any idea what the problem is or how it can be worked around?

[domoritz]

There is a bug in the generated Vega spec. The data source data_15 shouldn't be used before it is defined. I don't know why this doesn't cause an issue in other browsers.

The Vega spec doesn't work in Safari or Chrome. However, Safari generates a different Vega spec! There must be a bug in how we order datasets and browsers seem to sort differently. This is super subtle. Thanks for finding out that the problem is the browser so quickly.

[domoritz]

The bug is here: https://github.com/vega/vega-lite/blob/master/src/compile/data/assemble.ts#L230

[domoritz]

Ahh, I tried to be clever. My idea was that I'd sort the data to move data with no transforms to the beginning and maintain the order of the rest. However, that's not what happens [1,1,1,1,0,1,1,1,1,1,0].map((x, i) => ({x: x, index: i})).sort((a,b) => a.x === 0 ? -1 : b.x === 0 ? 1 : 0). The logic needs to change there.

[domoritz]

Fixed in https://github.com/vega/vega-lite/pull/3597

[jwoLondon]

Great work, and speedy!

Thanks.

[domoritz]

Thank you for the excellent error report. I immediately knew where to look.