Vega-lite: Ordering of connected scatter plot incorrect

[lawrlee]

I'm trying to create a connected scatter plot using the following data

{
    "values": [
      {
        "value": 1,
        "label": "blue"
      },
      {
        "value": 2,
        "label": "green"
      },
      {
        "value": 3,
        "label": "yellow"
      },
      {
        "value": 4,
        "label": "red"
      }
    ]
}

and I want to order the x-axis values by value while showing the labels label. The following spec works correctly:

https://vega.github.io/editor/#/gist/vega-lite/lawrlee/448f05a10b9107dfcc529f6a6e211f23

with this layer:

  "layer": [
    {
        "encoding": {
            "x": {"field": "label", "scale": {"zero": false}, "type": "ordinal", "sort": {"field": "value", "op": "values"}},
            "y": {"field": "value", "scale": {"zero": false}, "type": "quantitative"},
            "order": {"field": "value", "type": "quantitative"}
        },
        "mark": "line"
    }
  ]

However, when I add the point layer, the ordering of the x-axis resets to alphabetical based on the label values.

https://vega.github.io/editor/#/gist/vega-lite/lawrlee/1403c3b87e712e905234e971fae12f39

  "layer": [
    {
      "encoding": {
        "x": {
          "field": "label",
          "scale": {
            "zero": false
          },
          "type": "ordinal",
          "sort": {
            "field": "value",
            "op": "values"
          }
        },
        "y": {
          "field": "value",
          "scale": {
            "zero": false
          },
          "type": "quantitative"
        },
        "order": {
          "field": "value",
          "type": "quantitative"
        }
      },
      "mark": "line"
    },
    {
      "encoding": {
        "x": {
          "field": "label",
          "scale": {
            "zero": false
          },
          "type": "ordinal"
        },
        "y": {
          "field": "value",
          "scale": {
            "zero": false
          },
          "type": "quantitative"
        }
      },
      "mark": "point"
    }
  ]

How do I achieve the ordering sorted by value with both line and point layers? I have tried multiple combinations of order and sort with little success.

[kanitw]

Thanks for reporting the issue. I think you run into a bug that currently you cannot sort x/y-scale for layered plot yet. I will close this as this is a special case of https://github.com/vega/vega-lite/issues/2177.

For documenting purpose, the ideal spec (that would work once we fix #2177) should be

 "layer": [
    {
      "encoding": {
        "x": {
          "field": "label",
          "type": "ordinal",
          "sort": {
            "field": "value",
            "op": "values"
          }
        },
        "y": {
          "field": "value",
          "scale": {
            "zero": false
          },
          "type": "quantitative"
        }
      },
      "mark": "line"
    },
    {
      "encoding": {
        "x": {
          "field": "label",
          "scale": {
            "zero": false
          },
          "type": "ordinal"
        },
        "y": {
          "field": "value",
          "scale": {
            "zero": false
          },
          "type": "quantitative"
        }
      },
      "mark": "point"
    }
  ]

(Given your explanation above, there should be no need for the order channel, zero=false for x-scale.)

[kanitw]

With #3959, the following spec works

{
  "data": {
    "values": [
      {
        "value": 1,
        "label": "blue"
      },
      {
        "value": 2,
        "label": "green"
      },
      {
        "value": 3,
        "label": "yellow"
      },
      {
        "value": 4,
        "label": "red"
      }
    ]
  },
  "encoding": {
    "x": {
      "field": "label",
      "type": "ordinal",
      "sort": {
        "field": "value",
        "op": "values"
      }
    },
    "y": {
      "field": "value",
      "scale": {
        "zero": false
      },
      "type": "quantitative"
    }
  },
  "layer": [
    {
      "mark": "line"
    },
    {
      "mark": "point"
    }
  ]
}

[kanitw]

We should later look into why sort must be specified for both layers though, but I think it's a separate issue from #2177

[kanitw]

I think the sort logic in domain.ts needs to be revised, but this is not a high priority issue though.

[domoritz]

The issue is not the sort logic but it's a bit deeper than that.

If we add sorting to one of the layers, we also add a filter for valid values on the dataflow for that layer. The other layer does not get it. therefore, we cannot merge the dataflows (we could change that, though) and we get two domains that cannot be merged and then we run into https://github.com/vega/vega-lite/issues/5048.

I propose that we push invalid filters though forks. This means that a forked dataflow may also be filtered even though there is no filter on that part of the dataflow but I can't think of any reasons why this would be an issue.

@Saba9 @kanitw thoughts?

[kanitw]

If we add sorting to one of the layers, we also add a filter for valid values on the dataflow for that layer.

Why is that the case? We only add invalid filters for continuous scales, not discrete scales.

[kanitw]

In any case, I wasn't sure why I reopened this issue since the issue is fixed.

(It's working online.)