

In [ ]:

    
import ipyvuetify as v

First histogram plot



In [ ]:

    
import ipywidgets as widgets
import numpy as np
from bqplot import pyplot as plt
import bqplot


n = 200

x = np.linspace(0.0, 10.0, n)
y = np.cumsum(np.random.randn(n)*10).astype(int)

fig = plt.figure( title='Histogram')
np.random.seed(0)
hist = plt.hist(y, bins=25)
hist.scales['sample'].min = float(y.min())
hist.scales['sample'].max = float(y.max())
fig.layout.width = 'auto'
fig.layout.height = 'auto'
fig.layout.min_height = '300px' # so it shows nicely in the notebook
fig



In [ ]:

    
slider = v.Slider(thumb_label='always', class_="px-4", v_model=30)
widgets.link((slider, 'v_model'), (hist, 'bins'))
slider

Line chart



In [ ]:

    
fig2 = plt.figure( title='Line Chart')
np.random.seed(0)
p = plt.plot(x, y)

fig2.layout.width = 'auto'
fig2.layout.height = 'auto'
fig2.layout.min_height = '300px' # so it shows nicely in the notebook
fig2



In [ ]:

    
brushintsel = bqplot.interacts.BrushIntervalSelector(scale=p.scales['x'])

def update_range(*args):
    if brushintsel.selected is not None and brushintsel.selected.shape == (2,):
        mask = (x > brushintsel.selected[0]) & (x < brushintsel.selected[1])
        hist.sample = y[mask]
    
brushintsel.observe(update_range, 'selected')
fig2.interaction = brushintsel

Second histogram plot



In [ ]:

    
n2 = 200

x2 = np.linspace(0.0, 10.0, n)
y2 = np.cumsum(np.random.randn(n)*10).astype(int)

figHist2 = plt.figure( title='Histogram 2')
np.random.seed(0)
hist2 = plt.hist(y2, bins=25)
hist2.scales['sample'].min = float(y2.min())
hist2.scales['sample'].max = float(y2.max())
figHist2.layout.width = 'auto'
figHist2.layout.height = 'auto'
figHist2.layout.min_height = '300px' # so it shows nicely in the notebook

sliderHist2 = v.Slider(_metadata={'mount_id': 'histogram_bins2'}, thumb_label='always', class_='px-4', v_model=5)
from traitlets import link
link((sliderHist2, 'v_model'), (hist2, 'bins'))


display(figHist2)
display(sliderHist2)

Set up voila vuetify layout

The voila vuetify template does not render output from the notebook, it only shows widget with the mount_id metadata.



In [ ]:

    
v.Tabs(_metadata={'mount_id': 'content-main'}, children=[
    v.Tab(children=['Tab1']),
    v.Tab(children=['Tab2']),
    v.TabItem(children=[
        v.Layout(row=True, wrap=True, align_center=True, children=[
            v.Flex(xs12=True, lg6=True, xl4=True, children=[
                fig, slider
            ]),
            v.Flex(xs12=True, lg6=True, xl4=True, children=[
                figHist2, sliderHist2
            ]),
            v.Flex(xs12=True, xl4=True, children=[
                fig2
            ]),
        ])
    ]),
    v.TabItem(children=[
        v.Container(children=['Lorum ipsum'])
    ])
])