Interactions
Jupyter Scatter's scatter plots are interactive by default. You can pan, zoom, hover, click, and lasso with your mouse. Moreover, Jupyter Scatter offers APIs for filtering and zooming.
Pan & Zoom the View
Like in Google Maps, you can pan and zoom to adjust the view and explore different areas of the scatter plot in detail.
To pan, click and hold the primary mouse button and drag your mouse.
To zoom, simply engage your mouse's scroll wheel.
Hover a Point
To help locate a point and where it's located, when you mouse over a point, a reticle will appear.
Click a Point
In order to select a point you can click on it.
Double Click into the Void
To deselect points, simply double click into the background.
Lasso Points
To select more than a single point, you can lasso multiple points.
To activate the lasso, click and hold down your primary mouse button. An open circle will appear and slowly close in clockwise order. Once the circle is fully closed it'll turn blue. At this point the lasso is active.
Alternatively, you can click on the crosshair icon in the top-left of the scatter plot to permanently activate the lasso.
To select points once the lasso is active, keep holding down your primary mouse button and move your mouse cursor around the points you want to select. Finally, release your primary mouse key.
Filter Points
Sometimes it can be useful to exclusively focus on a subset of points and temporarily hide other points. This can be achieved using scatter.filter():
scatter.filter([0, 1, 2])The filtering is blazing fast as it's only hiding non-filtered points. To unset the filter simply call the filter function with None:
scatter.filter(None)Zoom to Points
When trying to focus on a subset of points (in particular point clusters), it can help to zoom in. To zoom to a specific set of points, you can use scatter.zoom():
scatter.zoom([0, 1, 2])You can customize how much padding you want to leave when you zoom in as follows:
scatter.zoom(
to=[0, 1, 2],
padding=1,
)In this case we're instructing our scatter plot instance to have the padding be the same size as the bounding box of the first, second, and third point we're zooming to.
Lastly, a cool feature of Jupyter Scatter is the ability to automatically zoom to selected or filtered points to make it as simple as possible for you to focus on a certain set of points.
scatter.zoom(on_selection=True)Overview+Detail Interface
Using everything we've learned so far and combining it with Jupyter Scatter's ability to synchronize/link multiple scatter plots we can easily create an overview+detail interface as follows:
from jscatter import Scatter, compose
from numpy.random import rand
x, y = rand(500), rand(500)
sc_overview = Scatter(x, y)
sc_detail = Scatter(x, y, zoom_on_filter=True, zoom_padding=1)
def filter_on_select(change):
sc_detail.filter(change['new'] if len(change['new']) > 0 else None)
sc_overview.widget.observe(filter_on_select, names='selection')
compose(
[(sc_overview, "Overview"), (sc_detail, "Detail")],
sync_hover=True,
)