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.
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.
INFO
To permanently activate the lasso, you can click on the crosshair icon in the top-left of the scatter plot.
Add and Remove Selected Points
To add more points to an existing selection, hold down the meta key as you lasso select the points you want to add. To remove points from a selection, hold down the alt key as you lasso select the points you want to remove.
INFO
On macOS, the meta key is Command or ⌘ and the alt key is Option or ⌥.
Brush and Rectangle Lasso Selections
Beyond this freeform lasso selection, Jupyter Scatter also offers rectangular and brush style lasso selections. You can change the lasso type either via the lasso button in the top-left corner of the plot or via scatter.lasso(type=lasso_type), where lasso_type must be one of 'freeform', 'brush', or 'rectangle'.
Below is an example of the brush lasso selection.
And finally an example of the classic rectangular lasso selection.
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,
)