Easier navigation via zoom and pan combination

[asteppke]

Thank you for flexviz, this looks amazing with millions of points easily accessible!

When going through our datasets we often need a combination of quick zoom and pan. In other apps this works nicely with the mouse wheel to zoom in/out and middle mouse button to pan. The equivalent on a touch screen would be the pinch gesture.

For example bokeh calls this "WheelZoom", plotly calls this feature "ScrollZoom".

At the moment in the demo I have to manually switch between Zoom and Pan, breaking the flow of the mental operation. Would it be possible to use the mouse wheel / pinch zoom gesture to allow combined navigation through the datasets?

[jvdd]

Thanks @asteppke, glad FlexViz works well for you!

Two things already help with this today:

• Shift + drag pans while you are in Zoom mode (and zooms while you are in Pan mode), so you do not need to switch modes.
• Double-click resets the view.

Would that already be convenient enough for your use case?

If not, we are open to start exploring support for additional mouse and trackpad interactions:

• Mouse wheel zoom, centered on the cursor. On time-series (line) plots, this zooms the time axis only, so the y-axis can keep autoscaling. When the cursor is over an axis, the wheel zooms only that axis.
• Middle-button drag to pan, in every mode, including while cross-filtering.
• Trackpad pinch to zoom.

The intended behavior would be:

• In a full browser tab, like the demo, the plain mouse wheel zooms.
• Inside a notebook or another embedded page, the plain wheel continues to scroll the page, while Ctrl + wheel (⌘ + wheel on Mac) zooms the plot.

One question: do you also need pinch-to-zoom on a touch screen, or would trackpad pinch be sufficient? plotly.js does not currently support touch pinch for these plots, so that would require a separate implementation (which I'm not really keen on).

[asteppke]

Thanks @jvdd for the instant reply!

I experimented a bit with Shift+drag and it helps a little bit but is unfortunately not a replacement for a real zoom via the mouse / trackpad pinch. We are often looking at time series data here and then ideally you can quickly zoom into a small feature, pan around a bit and then smoothly zoom back out. Observing my colleagues a bit that appears to be by far the preferred interaction with different plots.

So your first suggestion, i.e. Mouse wheel zoom, centered on the cursor, would be a great addition. I am torn about only zooming on one axis and leave the other to scaling automatically. By keeping a constant "zoom ratio" on both axes one can hardly get lost and navigate easily, that might be a good starting point.

And to answer your last question: No, I do not think the effort on a pinch-to-zoom on a touch screen is necessary, especially not if it is a significant implementation effort.

[jvdd]

Thanks for the feedback! Wheel zoom (centered on the cursor) and middle-button pan are in #157. On line plots both move only the time axis, so y keeps autoscaling (you can always create an issue / comment if this feels inconvenient). A new Wheel toolbar button lets you choose plain wheel zoom, Ctrl/⌘ + wheel, or off.

Any further feedback after it is released would be very welcome :)

[asteppke]

Amazing @jvdd!

I checked out the branch #157 and tested with different plot types both the mouse wheel and trackpad pinch. They both work beautifully and especially the combination of left mouse for pan and mouse wheel for zoom allows to navigate complex data easily.

[jvdd]

Thanks @asteppke for the idea and for testing!

Wheel zoom and middle-button pan are merged in #157 and will be in the next release (probably first real non-beta release).

Since you tested the branch, I made the following change; a wheel spin also sends only one request.

On line plots, only the time axis zooms. If you want a both-axes option, please open an issue.

Closing this now. Feedback after the release is always welcome :)