Plot interactivo con bokeh

Con bokeh podemos crear plots interactivos que se sirven como una página web. Es muy útil cuando quieres mostrar datos a un usuario como gráficas, y permitir al usuario que interactúe con ellas.

A continuación vemos como implementar lo siguiente. Un diagrama con la representación de una onda sinusoidal y dos widgets que permiten modificar los parámetros de la misma.

Importamos lo que necesitamos.

import numpy as np
from bokeh.io import curdoc
from bokeh.layouts import column, row
from bokeh.models import ColumnDataSource, Slider
from bokeh.plotting import figure

Definimos la onda sinusoidal. Con linspace podemos definir N puntos entre 0 y 2*PI.

N = 200
x = np.linspace(0, 4*np.pi, N)
y = np.sin(x)
source = ColumnDataSource(data=dict(x=x, y=y))

plot = figure(height=400, width=400, y_range=[-2.5, 2.5])
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

Creamos dos Slider. Estos permitirán al usuario modificar la amplitud y frecuencia interactivamente. El on_change nos permite decir que hacer cuando la amplitud o frecuencia cambien.

amplitud = Slider(title="amplitud", value=1.0, start=-5.0, end=5.0, step=0.1)
frecuencia = Slider(title="frecuencia", value=1.0, start=0.1, end=5.1, step=0.1)

def update_data(attrname, old, new):
    a = amplitud.value
    k = frecuencia.value

    x = np.linspace(0, 4*np.pi, N)
    y = a*np.sin(k*x)

    source.data = dict(x=x, y=y)

for w in [amplitud, frecuencia]:
    w.on_change('value', update_data)

Creamos el plot con los dos Slider y el plot.

curdoc().add_root(
    column(amplitud,
           frecuencia,
           plot, width=800))

Y con el siguiente comando podemos ejecutar. El resultado se podrá ver en la siguiente dirección:

• 🔗 http://localhost:5006

bokeh serve interactivo_bokeh.py

✏️ Ejercicios:

• Implemente un botón de reset que al ser pulsado devuelva al sin a sus valores originales de amplitud y frecuencia.
• Modifica los rangos para que se pueda seleccionar una amplitud y frecuencia mayores en los Slider.