Zoom behaviour in a strip plot

I’m trying to enable pan and zoom on a strip plot.

I am creating a strip plot using what I think is the standard trick in Altair/Vega, i.e. by using a faceted plot where each facet is a category and we create jitter using the leftover y (or x) axis. For example:

df = pd.DataFrame({'Category': ['A']*100 + ['B']*100,
                   'Value': np.random.randn(200)})

alt.Chart(df)\
    .mark_circle()\
    .transform_calculate(jitter='sqrt(-2*log(random()))*cos(2*PI*random())')\
    .encode(row='Category:N',
            y=alt.Y('jitter:Q', 
                    title=None,
                    axis=alt.Axis(labels=False)),
            x='Value:Q')\
    .properties(width=600,height=60)\
    .configure_view(strokeWidth=0)\
    .configure_facet(spacing=0)\
    .interactive()

The .interactive() call here allows me to pan and zoom, but zooming has an unfortunate effect on the strip plot. The (quantitative) x-axis zooms fine, but the y-axis is actually a set of facets, and the real y-axes are inside the facets. So zooming in by binding to ‘scales’ causes each facet to zoom in independently rather than zooming in on the plot as a whole. The means that the jittered data points get clipped by the edges of each facet, so zooming in actually causes data points to disappear. Of course zooming a plot always causes data points to disappear, but usually they disappear off the edge of the plot, which is intuitive and expected, wheras here they are disappearing off the edges of the facet, which to the user looks like the middle of the plot.

Fundamentally the problem is that the strip plot is not really a single plot, even though it conceptually would like to be - we’re using facets to work around the fact that we can’t add jitter to a categorical variable.

Is there any way round this? What I would like is the natural zoom behaviour, i.e. for zooming in to cause each category to take up more room on the plot so that some categories (in this case facets) disappear off the edges of the plot.

[claresloggett]

Thank you @bartekpi ! I considered the alternative hack you’re describing - i.e. making the field numeric - but had never tried it. The axis labels are fiddlier than I realised they’d be, since I hadn’t considered that you can’t set the axis labels using simple strings, you have to set them from the data using a labelExpr. Having the example code is helpful, cheers,

[joelostblom]

Thanks for clarifying! I’ll leave this open until there is a better way to achieve this behavior. The relevant Vega-Lite ticket for jitter plots is here https://github.com/vega/vega-lite/issues/4703, I’m also very excited for it to be implemented =)