vega / vega-lite

A concise grammar of interactive graphics, built on Vega.
https://vega.github.io/vega-lite/
BSD 3-Clause "New" or "Revised" License
4.63k stars 601 forks source link

Setting `binSpacing` to 0 still leaves a gap between marks #9308

Open joelostblom opened 5 months ago

joelostblom commented 5 months ago

Bug Description

I was expecting binSpacing=0 to make bars of a histogram flush against each other, but there is still a small gap as can be seen here:

image Open the Chart in the Vega Editor

The reason for this seems to be the initial 0.5 offset to the x and x2 encoding, as can be seen here:

"x2": {
  "scale": "x",
  "field": "bin_maxbins_10_IMDB_Rating",
  "offset": {
    "signal": "0.5 + (abs(scale(\"x\", datum[\"bin_maxbins_10_IMDB_Rating_end\"]) - scale(\"x\", datum[\"bin_maxbins_10_IMDB_Rating\"])) < 0.25 ? -0.5 * (0.25 - (abs(scale(\"x\", datum[\"bin_maxbins_10_IMDB_Rating_end\"]) - scale(\"x\", datum[\"bin_maxbins_10_IMDB_Rating\"])))) : 0)"
  }
},
"x": {
  "scale": "x",
  "field": "bin_maxbins_10_IMDB_Rating_end",
  "offset": {
    "signal": "0.5 + (abs(scale(\"x\", datum[\"bin_maxbins_10_IMDB_Rating_end\"]) - scale(\"x\", datum[\"bin_maxbins_10_IMDB_Rating\"])) < 0.25 ? 0.5 * (0.25 - (abs(scale(\"x\", datum[\"bin_maxbins_10_IMDB_Rating_end\"]) - scale(\"x\", datum[\"bin_maxbins_10_IMDB_Rating\"])))) : 0)"
  }
},

I believe that the 0.5 offset is there to make the default bar spacing centered, which makes sense, but I think we should shift the scale of the binSpacing parameter with 0.5 pixels, so that setting binSpacing=0 means that there will be 0 pixels between the bars. We can do this by subtracting 0.25 from the x2 encoding and adding 0.25 to the x encoding, e.g. (the final value of the if-clause in the example above, would become 0 - 0.25 for x2 and 0 + 0.25 for x (the 0 there is the binSpacing value). We would also need to indicate in the docs that the default value for the binSpacing is actually 1.5 rather then 1px (and increase it accordingly in the code).

To be clear, I think it is nicer with spacing than without in terms of histograms, but for 2D histograms/binned heatmaps, I would sometimes like to remove it and I think it makes more sense if binSpacing=0 corresponds to no gap.

@kanitw I saw that you did some work on the bin spacing in https://github.com/vega/vega-lite/pull/6256. Does what I'm suggesting above sound reasonable to you? And would the fix be to just shift the binSpacingOffset/binSpacingOffset2 variables here ?

joelostblom commented 5 months ago

Hmm, this might be a case of the other bug I just posted in #9307. I thought I saw the behavior even when controlling for that, but I can't reproduce it in the VegaEditor any longer. It still reproduces in JupyterLab, but let's solve the other issue first:

image

joelostblom commented 5 months ago

One observations that suggests this might indeed be a different issue than #9307 is that I can see the bin gaps "jump around" as I zoom in and out in the browser, while I don't see that for the charts in #9307

https://github.com/vega/vega-lite/assets/4560057/efdfdc3e-a6b9-432e-bafb-2dc703545925