Skip to content


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.

Hover to play video

To zoom, simply engage your mouse's scroll wheel.

Hover to play video

Hover a Point

To help locate a point and where it's located, when you mouse over a point, a reticle will appear.

Hover to play video

Click a Point

In order to select a point you can click on it.

Hover to play video

Double Click into the Void

To deselect points, simply double click into the background.

Hover to play video

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.

Hover to play video

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:

Hover to play video

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])
Hover to play video

You can customize how much padding you want to leave when you zoom in as follows:

  to=[0, 1, 2],

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.


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')

    [(sc_overview, "Overview"), (sc_detail, "Detail")],
Hover to play video