Re-use Vega-Lite axis when switching between data

Question

I am trying to port some D3.js graphs to Vega Lite to make it faster to iterate on new designs. The current example is a bar char with buttons underneath which change the data being displayed. Importantly, the y-label of the data will change as the data does (the x-does not) as does the need for a legend (some sets of data have more than one series, others just 1 and don't need a legend)

I have more or less reproduced the graphs themselves in Vega Lite, however I am having an issue ensuring the plots have their axes aligned. Even in the case where there is no legend in either plot, the change in y-label/y-values means the fixed sizing moves things around.

I have uploaded a GIF to show what I mean.

Currently the buttons function by taking the Vega Lite template and updating it based on a new set of data (basically just changing the dataset and labels, domain, etc).

Is there any way to align these or is that out of scope for Vega Lite?

EDIT:

After tinkering a bit I have found it seems to be a padding issue (see new GIF). What I changed was the formatting of the yaxis and pushing the yaxis back from the axis which seemed to 'brace' the plot against everything else. This shows that in principle this alignment (even if by fluke/brute force) is possible. However, when i close the sidebar of the responsive page I am on, the problem re-emerges. I also set 'align':'all' and 'padding':10. A higher padding 'braces' it more but then just fills the place with loads of whitespace.

dominik dominik · Accepted Answer · 2019-12-03T05:51:24

The issue seems to be that the length of the labels on the y-axis change. you could fix the extent to be at least some large enough number.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative", "axis": {"minExtent": 100}}
  }
}

This is a tricky issue since you are asking to align across different charts that have no knowledge of each other.

Re-use Vega-Lite axis when switching between data

2 Answers