ipyvolume & bqplot

This example shows how the selection from a ipyvolume quiver plot can be controlled with a bqplot scatter plot and it's selection tools. We first get a small dataset from vaex



In [1]:

    
import numpy as np
import vaex



In [2]:

    
ds = vaex.example()
N = 2000 # for performance reasons we only do a subset
x, y, z, vx, vy, vz, Lz, E = [ds.columns[k][:N] for k in "x y z vx vy vz Lz E".split()]

bqplot scatter plot

And create a scatter plot with bqplot



In [3]:

    
import bqplot.pyplot as plt



In [4]:

    
plt.figure(1, title="E Lz space")
scatter = plt.scatter(Lz, E,
                selected_style={'opacity': 0.2, 'size':1, 'stroke': 'red'},
                unselected_style={'opacity': 0.2, 'size':1, 'stroke': 'blue'},
                default_size=1,
               )
plt.brush_selector()
plt.show()

Ipyvolume quiver plot

And use ipyvolume to create a quiver plot



In [8]:

    
import ipyvolume.pylab as ipv



In [9]:

    
ipv.clear()
quiver = ipv.quiver(x, y, z, vx, vy, vz, size=2, size_selected=5, color_selected="blue")
ipv.show()

Linking ipyvolume and bqplot

Using jslink, we link the selected properties of both widgets, and we display them next to eachother using a VBox.



In [10]:

    
from ipywidgets import jslink, VBox



In [11]:

    
jslink((scatter, 'selected'), (quiver, 'selected'))









    





Link(source=(Scatter(colors=['steelblue'], default_size=1, interactions={'hover': 'tooltip'}, scales={'x': Lin…



In [12]:

    
hbox = VBox([p3.current.container, plt.figure(1)])
hbox

Embedding

We embed the two widgets in an html file, creating a standlone plot.



In [13]:

    
import ipyvolume.embed
# if we don't do this, the bqplot will be really tiny in the standalone html 
bqplot_layout = hbox.children[1].layout
bqplot_layout.min_width = "400px"



In [14]:

    
ipyvolume.embed.embed_html("bqplot.html", hbox, offline=True, devmode=True)









    



Downloading https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js: [==========] Finished
Downloading https://unpkg.com/@jupyter-widgets/html-manager@^0.18.0/dist/embed-amd.js: 1.24Mb/10 [==========] Finished
Downloading https://fontawesome.com/v4.7.0/assets/font-awesome-4.7.0.zip: 0.64Mb/10 [==========] Finished



In [15]:

    
!open bqplot.html

screenshot