bqplot_vuetify_example.ipynb

Import

import ipyvuetify as v

Erster Histogrammplot

import bqplot
import ipywidgets as widgets
import numpy as np

from bqplot import pyplot as plt


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

Slider

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

Liniendiagramm

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

BrushIntervalSelector hinzufügen

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

Zweiter Histogrammplot

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)

Voila vuetify-Layout einrichten

Das Voila vuetify-Template zeigt nicht die Ausgabe des Jupyter Notebook an, sondern nur das Widget mit den mount_id-Metadaten.

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"])]),
    ],
)