Density transform range incorrectly computed when used with categorical y-value and an area mark

[joelostblom]

Something odd is happening with the value range when computing density transforms for multiple densities and trying to map each density to a different categorical position on the axis. In the chart below a density transform is computed for each movie genre and each movie genre is also mapped to it's own position on the x-axis:

{
  "data": {
    "values": [
      {"runtime": 130, "genres": "Fantasy"},
      {"runtime": 131, "genres": "Fantasy"},
      {"runtime": 132, "genres": "Fantasy"},
      {"runtime": 89, "genres": "Animation"},
      {"runtime": 88, "genres": "Animation"},
      {"runtime": 88, "genres": "Animation"}
    ]},
  "mark": {"type": "area", "interpolate": "linear-closed"},
  "encoding": {
    "x": {"field": "runtime", "type": "quantitative"},
    "y": {"field": "genres", "type": "nominal"},
    "detail": {"field": "genres", "type": "nominal"},
    "yOffset": {"field": "density", "type": "quantitative"}
  },
  "transform": [
    {"density": "runtime", "groupby": ["genres"], "as": ["runtime", "density"], "steps": 50}
  ],
  "$schema": "https://vega.github.io/schema/vega-lite/v5.15.1.json"
}

Open the Chart in the Vega Editor

As you can see in the chart, the maximum x-axis value is 250, although the max runtime value in the data is only 132. Changing the the first "Animation" runtime data point from 89 to 88, causes the x-axis value to go all the way up to 4000, which makes the plot unusable (this effect is exacerbated by increasing the number of steps in the transform):

Removing the y-encoding but keeping everything else the same, results in a chart with an expected axis range (it looks odd due to the small number of values, but the x-axis range correspond to the actual runtime values):

Note that this does not only happen in small toy datasets, but also in datasets with hundreds of unique observations. I think it is being triggered by there being a certain proportion/amount of duplicated values, but I don't understand why it only happens when there is a categorical y-encoding. See this example (if the duplicates are dropped or the y-encoding removed, the chart looks at expected):

Open the Chart in the Vega Editor

cc @kanitw @domoritz and @ChristopherDavisUCI since this would be blocking for the recent violin approach I suggested in https://github.com/vega/vega-lite/issues/3442#issuecomment-1764465275

[joelostblom]

I should also note that this only happens when an area mark is used. Using a line or point set the x-axis range correctly.

[kanitw]

Any reason why we need detail in the spec?

[kanitw]

Also, any reason why "interpolate": "linear-closed" should be used?

[ChristopherDavisUCI]

Hi @kanitw, I hope @joelostblom will correct me if I'm wrong, but I think this spec is an example of one where, if you remove the "interpolate": "linear-closed", it stops looking correct. I took that example from this post by Joel: https://github.com/vega/vega-lite/issues/3442#issuecomment-1764465275

[joelostblom]

"interpolate": "linear-closed"

Removing "interpolate": "linear-closed" seems to cause the areas to extend all the way to zero even if there are not data points there. Taking the first spec from #3442 it looks like this with "linear-closed":

and like this without setting it:

It's possible that something else is going on under the hood, but changing this setting gave the desired result. It also helped connected the violins as in @ChristopherDavisUCI post above, but this might be something we can work around in another way, eg adding {"stack": "center"} as an option to offset encodings as I mentioned here https://github.com/vega/vega-lite/issues/3442#issuecomment-1764465275

Detail encoding

Without setting the detail encoding (or color etc), the area are connected between the different categorical y-axis values:

Setting the detail encoding makes sure that each y-axis tick gets a separate area mark:

Open the Chart in the Vega Editor