[PYTHON] Interaktive Visualisierung mit ipywidgets und Bokeh

Warum es interaktiv ist

Wenn Sie ein Diagramm mit einigen Parametern ausgeben möchten, können die folgenden Methoden als Methode betrachtet werden, um jedes Mal zu überprüfen, wenn die Parameter geändert werden.

1. Geben Sie jedes Mal das Argument der Ausgabefunktion ein und geben Sie das Diagramm aus
2. Geben Sie alle Diagramme der Parameter aus, die Sie ändern möchten
3. Stellen Sie die Parameter und das Ausgabediagramm interaktiv ein

Die 1-Methode ist etwas umständlich zu tippen. Auch wenn es sich auf der IPython-Konsole befindet, führen Sie die Funktion mit "Jupyter Notebook" aus und schreiben Sie das Argument der ausgeführten Funktion neu ... Ja, es ist problematisch. Wie wäre es mit der 2 Methode? Es erscheint praktisch genug, zwei oder drei Diagramme gleichzeitig auszugeben und zu vergleichen. In einer Situation mit 100 solchen Parametern scheint es jedoch schwierig zu sein, dies mit dem menschlichen Auge zu überprüfen. Implementieren wir also die 3-Methode.

Ipywidgets installieren

Es ist einfach, "ipywidgets" zu verwenden, um eine interaktive Benutzeroberfläche mit "Jupyter Notebook" zu implementieren. Die Installationsmethode ist wie folgt.

Für pip

pip install ipywidgets
jupyter nbextension enable --py widgetsnbextension

Für conda

conda install -c conda-forge ipywidgets

ipywidgets.interact

Sie können eine interaktive Benutzeroberfläche erstellen, indem Sie "ipywidgets.interact" mit der gewünschten Funktion dekorieren. Im folgenden Beispiel wird der Aktienkurs erfasst und der gleitende Durchschnitt des Schlusskurses für n Tage in der Grafik ausgegeben. Wenn Sie dem Argument "Interaktion" einen numerischen Wert zuweisen, wird auf dem "Jupyter-Notizbuch" ein Schieberegler angezeigt. Wenn Sie diesen anpassen, werden die Parameter des gleitenden Durchschnitts geändert. n = (5, 30) setzt den Minimalwert auf 5 und den Maximalwert auf 30. Sie können auch "n = 10" setzen. Dies ist der Standardwert ohne Einschränkungen.

%matplotlib inline

from pandas_datareader.data import DataReader
from ipywidgets import interact

price = DataReader('^GSPC', 'yahoo', start='2016-01-01', end='2016-12-31')


@interact(n=(5, 30))
def plot_rolling_mean(n):
    price['Adj Close'].plot()
    price['Adj Close'].rolling(n).mean().plot()

Auf diese Weise ist es möglich, visuell nach dem entsprechenden Wert des Parameters in der Benutzeroberfläche zu suchen.

Als weiteres Beispiel ändern wir den Diagrammtyp. Wenn Sie auf das Argument "Interaktion" tippen oder eine Liste erstellen, wird ein Dropdown-Menü angezeigt. Verwenden Sie dies, um den Diagrammtyp in der Benutzeroberfläche zu ändern.

@interact(kind=['line', 'area'])
def plot_line_or_band(kind):
    price['Adj Close'].plot(kind=kind)

Indem Sie die Benutzeroberfläche und die Optionen auf diese Weise im Voraus vorbereiten, können Sie Personen, die das Programm nicht verstehen, intuitiv zum Betrieb ermutigen.

Erfahren Sie mehr über ipywidgets

Sie finden es auch in der Dokumentation (https://ipywidgets.readthedocs.io/en/latest/index.html). Die Liste der von "ipywidgets" bereitgestellten Benutzeroberflächen finden Sie unter "ipywidgets.widgets.Widget.widget_types". Ist möglich.

import ipywidgets as widgets
widgets.Widget.widget_types

Es gibt nur das ...

{'Jupyter.Accordion': ipywidgets.widgets.widget_selectioncontainer.Accordion,
 'Jupyter.BoundedFloatText': ipywidgets.widgets.widget_float.BoundedFloatText,
 'Jupyter.BoundedIntText': ipywidgets.widgets.widget_int.BoundedIntText,
 'Jupyter.Box': ipywidgets.widgets.widget_box.Box,
 'Jupyter.Button': ipywidgets.widgets.widget_button.Button,
 'Jupyter.Checkbox': ipywidgets.widgets.widget_bool.Checkbox,
 'Jupyter.ColorPicker': ipywidgets.widgets.widget_color.ColorPicker,
 'Jupyter.Controller': ipywidgets.widgets.widget_controller.Controller,
 'Jupyter.ControllerAxis': ipywidgets.widgets.widget_controller.Axis,
 'Jupyter.ControllerButton': ipywidgets.widgets.widget_controller.Button,
 'Jupyter.Dropdown': ipywidgets.widgets.widget_selection.Dropdown,
 'Jupyter.FlexBox': ipywidgets.widgets.widget_box.FlexBox,
 'Jupyter.FloatProgress': ipywidgets.widgets.widget_float.FloatProgress,
 'Jupyter.FloatRangeSlider': ipywidgets.widgets.widget_float.FloatRangeSlider,
 'Jupyter.FloatSlider': ipywidgets.widgets.widget_float.FloatSlider,
 'Jupyter.FloatText': ipywidgets.widgets.widget_float.FloatText,
 'Jupyter.HTML': ipywidgets.widgets.widget_string.HTML,
 'Jupyter.Image': ipywidgets.widgets.widget_image.Image,
 'Jupyter.IntProgress': ipywidgets.widgets.widget_int.IntProgress,
 'Jupyter.IntRangeSlider': ipywidgets.widgets.widget_int.IntRangeSlider,
 'Jupyter.IntSlider': ipywidgets.widgets.widget_int.IntSlider,
 'Jupyter.IntText': ipywidgets.widgets.widget_int.IntText,
 'Jupyter.Label': ipywidgets.widgets.widget_string.Label,
 'Jupyter.PlaceProxy': ipywidgets.widgets.widget_box.PlaceProxy,
 'Jupyter.Play': ipywidgets.widgets.widget_int.Play,
 'Jupyter.Proxy': ipywidgets.widgets.widget_box.Proxy,
 'Jupyter.RadioButtons': ipywidgets.widgets.widget_selection.RadioButtons,
 'Jupyter.Select': ipywidgets.widgets.widget_selection.Select,
 'Jupyter.SelectMultiple': ipywidgets.widgets.widget_selection.SelectMultiple,
 'Jupyter.SelectionSlider': ipywidgets.widgets.widget_selection.SelectionSlider,
 'Jupyter.Tab': ipywidgets.widgets.widget_selectioncontainer.Tab,
 'Jupyter.Text': ipywidgets.widgets.widget_string.Text,
 'Jupyter.Textarea': ipywidgets.widgets.widget_string.Textarea,
 'Jupyter.ToggleButton': ipywidgets.widgets.widget_bool.ToggleButton,
 'Jupyter.ToggleButtons': ipywidgets.widgets.widget_selection.ToggleButtons,
 'Jupyter.Valid': ipywidgets.widgets.widget_bool.Valid,
 'jupyter.DirectionalLink': ipywidgets.widgets.widget_link.DirectionalLink,
 'jupyter.Link': ipywidgets.widgets.widget_link.Link}

Ich habe nicht die physische Kraft, um all dies zu erklären, daher verwende ich als Beispiel "ipywidgets.widgets.Dropdown".

from IPython.display import display
d = widgets.Dropdown(options=['red', 'green', 'blue'], value='blue')


def on_value_change(change):
    print(change['new'])


d.observe(on_value_change, names='value')

display(d)

Das Dropdown-Menü wird mit "IPython.display.display" angezeigt und das Ereignis wird mit der "Observ" -Methode behandelt. Dem Schlüsselwortargument names werden die Eigenschaften übergeben, die an die Funktion on_value_change übergeben werden sollen. Verwenden Sie normalerweise "Wert". Wenn sich der Dropdown-Wert ändert, wird "on_value_change" aufgerufen und der Wert der Eigenschaft "value" gedruckt.

Versuchen Sie, mit Bokehs push_notebook zu kombinieren

Bokeh hat eine praktische Methode namens bokeh.io.push_notebook, mit der Sie bereits ausgegebene Diagramme verarbeiten und Änderungen an deren Inhalten vornehmen können. Lassen Sie uns die Farbe des Diagrammobjekts mithilfe der oben beschriebenen Dropdown-Liste dynamisch ändern.

from IPython.display import display
import ipywidgets as widgets
from bokeh.io import output_notebook, push_notebook
from bokeh.plotting import figure, show

d = widgets.Dropdown(options=['red', 'green', 'blue'], value='blue')


def on_value_change(change):
    r.glyph.fill_color = change['new']
    push_notebook(handle=t)


d.observe(on_value_change, names='value')

p = figure(width=250, height=250)
r = p.circle(1, 1, size=20, line_color=None)

output_notebook()

display(d)
t = show(p, notebook_handle=True)

Die Punkte hier sind die folgenden zwei Punkte.

• Setzen Sie notebook_handle = True im Schlüsselwortargument von t = show (p, notebook_handle = True) und show, um das Diagramm handhabbar zu machen.
• Übertragen von Änderungen an dem oben in "push_notebook (handle = t)" festgelegten Handler

Auf diese Weise können Sie mit Bokeh Änderungen am Grafikobjekt am Jupyter-Notizbuch vornehmen. Die oben erwähnte "matplotlib" hat den Prozess des Neuzeichnens des gesamten Diagramms ausgeführt, aber "Bokeh" ermöglicht es Ihnen, nur die erforderlichen Teile zu ändern, um den Prozess dynamischer Diagramme zu vereinfachen.

Im Vergleich zu "matplotlib" hat "Bokeh" eine Funktion, die "Jupyter-Notizbuch" von Anfang an kennt, da es sich um einen Neuling handelt, und es scheint, dass es sich um ein Visualisierungswerkzeug handelt, das mit "Jupyter-Notizbuch" kompatibel ist.

Bonus (Hauptgeschichte genannt)

Dies war die Einführung. Dieser Artikel ist der 16. Tag des Jupyter Notebook Adventskalenders 2016. Der 15. Tag war Yakiu no Hito, daher werde ich weiterhin Yakiu-Material ausprobieren.

Lassen Sie uns eine einfache Pitching-Maschine unter der Annahme erstellen, dass es einen Pitcher gibt, der die Position des Kreises in der Grafik dynamisch ändern und in den oberen, mittleren und unteren Teil werfen kann.

from random import randint
from bokeh.io import output_notebook, push_notebook
from bokeh.plotting import figure, show
from IPython.display import display
import ipywidgets as widgets


STRIKE_ZONE_HEIGHT = 750  #Schlagzonenhöhe
STRIKE_ZONE_WIDTH = 432  #Streikzonenbreite
STRIKE_ZONE_DIV = 3  #In 3 teilen und werfen
zone_low = (0, int(STRIKE_ZONE_HEIGHT / STRIKE_ZONE_DIV))  #Niedrige Reichweite
zone_mid = (zone_low[1], zone_low[1] * 2)  #Mittlerer Bereich
zone_high = (zone_mid[1], STRIKE_ZONE_HEIGHT)  #Höhere Reichweite


#Entscheide dich für den Kurs
def get_cause(zone):
    return randint(0, STRIKE_ZONE_WIDTH), randint(*zone)


#Zu einem festen Kurs werfen
def pitch(zone):
    x, y = get_cause(zone)
    r.data_source.data['x'] = [x]
    r.data_source.data['y'] = [y]
    #Das ist der Punkt! Drücken Sie auf den angegebenen Griff
    push_notebook(handle=t)


#Was passiert, wenn Sie auf die Schaltfläche klicken?
def on_button_clicked(b):
    cause_dict = {'High': zone_high, 'Mid': zone_mid, 'Low': zone_low}
    pitch(cause_dict[b.description])

#Schaltflächenobjekt erstellen
h = widgets.Button(description="High")
m = widgets.Button(description="Mid")
l = widgets.Button(description="Low")

#Behandeln des Ereignisses beim Klicken
h.on_click(on_button_clicked)
m.on_click(on_button_clicked)
l.on_click(on_button_clicked)


output_notebook()


p = figure(
    width=250,
    height=250,
    x_range=(0, STRIKE_ZONE_WIDTH),
    y_range=(0, STRIKE_ZONE_HEIGHT))
#Ursprünglicher Wert
r = p.circle([STRIKE_ZONE_WIDTH / 2], [STRIKE_ZONE_HEIGHT / 2], size=20)
# notebook_handle=Durch Hinzufügen von True können Sie es später bedienen.
t = show(p, notebook_handle=True)
display(h)
display(m)
display(l)

Für Schaltflächen können Sie die Steuerung mit einem Ereignishandler namens "on_click" übergeben. Weitere Informationen finden Sie in der Dokumentation zu Widget-Ereignissen (https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Events.html). Dieses Mal wurden die Koordinaten des Kurses durch Zufallszahlen festgelegt. Wenn Sie jedoch die tatsächlichen Daten einfügen und die Informationen zu Balltyp und Ballgeschwindigkeit hinzufügen, können Sie das oleore one ball bulletin implementieren, das der Live-Baseball-Site nicht unterlegen ist. Vorherige Person hat die eigentliche Datenerfassung durchgeführt. Wenn Sie also derjenige sind, der derjenige ist, versuchen Sie es bitte.

Zusammenfassung

Es ist etwas länger her, aber hier ist eine Zusammenfassung dessen, was ich Ihnen diesmal sagen wollte.

• Sie können eine Benutzeroberfläche ganz einfach erstellen, indem Sie "Interact" dekorieren
• Ein wenig aufwändig kann man aus "Widgets" das gewünschte machen
• Die Verwendung von "push_notebook" von "Bokeh" erleichtert das Erstellen dynamischer Diagramme

"ipywidgets" und "Bokeh" sind gute Werkzeuge für "Jupyter Notebook", aber sie haben ein geringes Bewusstsein. Ich wäre dankbar, wenn jemand daran denken könnte, dies als Gelegenheit zu nutzen.