ipyvolume & bokeh

This example shows how the selection from a ipyvolume quiver plot can be controlled with a bokeh scatter plot and it’s selection tools.

Ipyvolume quiver plot

The 3d quiver plot is done using ipyvolume

[1]:
import ipyvolume
import ipyvolume as ipv
import vaex

We load some data from vaex, but only use the first 10 000 samples for performance reasons of Bokeh.

[2]:
ds = vaex.example()
N = 10000
Downloading https://github.com/vaexio/vaex-datasets/releases/download/v1.0/helmi-dezeeuw-2000-FeH-v2-10percent.hdf5 to /home/docs/.vaex/data/helmi-dezeeuw-2000-FeH-v2-10percent.hdf5
--2021-11-01 12:38:24--  https://github.com/vaexio/vaex-datasets/releases/download/v1.0/helmi-dezeeuw-2000-FeH-v2-10percent.hdf5
Resolving github.com (github.com)... 140.82.114.3
Connecting to github.com (github.com)|140.82.114.3|:443... connected.
HTTP request sent, awaiting response... 302 Found
Location: https://github-releases.githubusercontent.com/242312915/41585000-5723-11ea-9b93-3c6c7ba8ea6c?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20211101%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211101T123824Z&X-Amz-Expires=300&X-Amz-Signature=2b747155e75ac9c366352b3c488d7818ee3982a395e66118e1f7a36cd8e0869c&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=242312915&response-content-disposition=attachment%3B%20filename%3Dhelmi-dezeeuw-2000-FeH-v2-10percent.hdf5&response-content-type=application%2Foctet-stream [following]
--2021-11-01 12:38:24--  https://github-releases.githubusercontent.com/242312915/41585000-5723-11ea-9b93-3c6c7ba8ea6c?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20211101%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211101T123824Z&X-Amz-Expires=300&X-Amz-Signature=2b747155e75ac9c366352b3c488d7818ee3982a395e66118e1f7a36cd8e0869c&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=242312915&response-content-disposition=attachment%3B%20filename%3Dhelmi-dezeeuw-2000-FeH-v2-10percent.hdf5&response-content-type=application%2Foctet-stream
Resolving github-releases.githubusercontent.com (github-releases.githubusercontent.com)... 185.199.108.154, 185.199.109.154, 185.199.110.154, ...
Connecting to github-releases.githubusercontent.com (github-releases.githubusercontent.com)|185.199.108.154|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 13553168 (13M) [application/octet-stream]
Saving to: ‘/home/docs/.vaex/data/helmi-dezeeuw-2000-FeH-v2-10percent.hdf5’

helmi-dezeeuw-2000- 100%[===================>]  12.92M  --.-KB/s    in 0.1s

2021-11-01 12:38:25 (87.8 MB/s) - ‘/home/docs/.vaex/data/helmi-dezeeuw-2000-FeH-v2-10percent.hdf5’ saved [13553168/13553168]

We make a quiver plot using ipyvolume’s matplotlib’s style api.

[3]:
ipv.figure()
quiver = ipv.quiver(ds.data.x[:N],  ds.data.y[:N],  ds.data.z[:N],
                    ds.data.vx[:N], ds.data.vy[:N], ds.data.vz[:N],
                    size=1, size_selected=5, color_selected="grey")
ipv.xyzlim(-30, 30)
ipv.show()

Bokeh scatter part

The 2d scatter plot is done using Bokeh.

[4]:
from bokeh.io import output_notebook, show
from bokeh.plotting import figure
from bokeh.models import CustomJS, ColumnDataSource

import ipyvolume.bokeh
output_notebook()
Loading BokehJS ...
[5]:
data_source = ColumnDataSource(data=dict(x=ds.data.Lz[:N], y=ds.data.E[:N]))

[6]:
p = figure(title="E Lz space", tools='lasso_select', width=500, height=500)
r = p.circle('x', 'y', source=data_source, color="navy", alpha=0.2)
ipyvolume.bokeh.link_data_source_selection_to_widget(data_source, quiver, 'selected')
show(p)

Now try doing a selection and see how the above 3d quiver plot reflects this selection.

[7]:
# but them next to eachother
import ipywidgets
out = ipywidgets.Output()
with out:
    show(p)
ipywidgets.HBox([out, ipv.gcc()])

Embedding in html

A bit of a hack, but it is possible to embed the widget and the bokeh part into a single html file (use at own risk).

[8]:
from bokeh.resources import CDN
from bokeh.embed import components

script, div = components((p))
template_options = dict(extra_script_head=script + CDN.render_js() + CDN.render_css(),
                        body_pre="<h2>Do selections in 2d (bokeh)<h2>" + div + "<h2>And see the selection in ipyvolume<h2>")
ipyvolume.embed.embed_html("tmp/bokeh.html",
                           [ipv.gcc(), ipyvolume.bokeh.wmh], all_states=True,
                           template_options=template_options)
[9]:
# uncomment the next line to open the html file
# !open tmp/bokeh.html

screenshot