3

I'm working on a bar plot in Vega-Lite (generated using Altair). Using the Vega-View API, I've written some code where users can select bars, which changes those bars' colors (along with doing some other stuff elsewhere in the application; the details aren't super important for this question).

My problem is this. Using the default continuousBandSize of 5, when zoomed out the bars seem to "overlap" each other horizontally. Here's a screenshot of this problem. This problem is resolvable by setting continuousBandSize to 1, but the problem then is that -- when you zoom in to the chart -- the bars become very thin and hard for users to select. (Furthermore, since I'm coloring the bars gray by default, they become hard to distinguish from the grid behind the visualization; and I'd prefer to keep the grid if I can.) Here's a screenshot of this problem.

Is it possible to make the bar marks in Vega-Lite adjacent at any zoom level? Or is this not feasible?

Prior research on this problem

The problem of bars being too thin is mentioned in an issue on Vega-Lite's GitHub page here, but that issue seems to address a different problem (of the bars going outside of the visualization).

I've looked into using padding, paddingInner, and paddingOuter (as mentioned in the Vega-Lite documentation and in the answer to this question), with no success. The problem of increasing sizes causing bars to overlap is also brought up in an (unanswered) comment on this answer.

Example Vega-Lite Specification

An example specification showing a subset of the plot I'm working on (with continuousBandSize set to 1 to show the "thin-bar" problem) is available in the Vega Editor here (apologies for the long URL). As mentioned above, if you zoom in too far with continuousBandSize set to 1, the gray bars become very thin and hard to see. And if you set continuousBandSize to something like 2 or above and zoom out too far, the bars start to overlap each other (this is demonstrated by the blue bar starting to get slightly "covered" by the gray bar to its right -- this isn't super visible here since this is only a subset of the full plot, but the problem is a lot clearer when there are ~500 bars).

Thanks!

Marcus Fedarko
  • 33
  • 3

2 Answers2

2

In your chart you are setting the x scale type to quantitative, which leads to very thin bars:

enter image description here

If you set the x scale to ordinal instead, the bars fill the space:

enter image description here

In general, bar charts perform better with non-continuous data.

jakevdp
  • 77,104
  • 11
  • 125
  • 160
  • Thanks so much for your help! It looks like using an ordinal scale [removes the ability to zoom/pan on the x-axis in the visualization](https://github.com/altair-viz/altair/issues/938), but it seems like it isn't possible to do that with an ordinal scale yet in Vega-Lite. I'll see what I can do to make this work for my use case. – Marcus Fedarko Apr 06 '19 at 03:04
1

I ran into the same issue. FWIW, the documentation does specify this behavior, although it took me a while to find it: effect of datatype on xaxis scales

msluyter
  • 91
  • 2