Bokeh: agregar widgets

Bokeh es una biblioteca de visualización de datos de Python para crear gráficos y diagramas interactivos. Nos ayuda a crear hermosos gráficos, desde diagramas simples hasta tableros. Con esta biblioteca, podemos crear una visualización generada por javascript sin escribir ningún script.

¿Qué es un widget?

Los widgets son controles interactivos que podemos usar con aplicaciones de bokeh para crear una interfaz interactiva para las visualizaciones. Para usar widgets, podemos agregarlos al documento y definir sus funciones, o podemos agregarlos directamente a la raíz del documento, agregados dentro de un diseño. Se permiten dos formas en bokeh para definir métodos para la funcionalidad de devolución de llamada:

• Use la devolución de llamada CustomJS para la interactividad que funciona en documentos HTML.
• Use el servidor bokeh y configure los controladores de eventos con .on_change o .on_click.

Estos controladores de eventos son funciones definidas por el usuario en python que se pueden agregar a los widgets y luego llamar cuando se toman ciertas acciones o se cambian los atributos en los widgets. Antes de agregar widgets a la visualización, necesitamos importar algunos paquetes de la biblioteca bokeh como:

• .io para mostrar los widgets y crear el archivo de salida.
• .layouts for widget box para envolver todos los widgets que contiene.
• .models.widgets clase base para todo tipo de widgets interactivos.

Y en el siguiente ejemplo, hemos utilizado la función output_file() para almacenar los resultados en el archivo y show() para mostrar los widgets en el navegador.

Botón

Es un widget de botón en el que se puede hacer clic que toma tres parámetros en los constructores:

• etiqueta: parámetro de string utilizado como etiqueta de texto o título para que se muestre el botón.
• icono: Parámetro opcional que se usa para que aparezca la imagen a la izquierda del título del botón.
• devolución de llamada: funciones de javascript personalizadas que se llamarán cuando se produzcan ciertos cambios, como hacer clic en un botón.

Aquí hemos usado button_type para especificar el color como primario (azul), advertencia (amarillo), éxito (verde), peligro (rojo).

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Button
 
output_file("button.html")
 
b1 = Button(label = "Back", button_type = "primary")
 
show(widgetbox(b1))

Producción:   

Menú desplegable

Esta es una lista de opciones que cada una contiene un menú verticalmente. Cuando hace clic en una de las opciones, aparece una lista desplegable de opciones debajo del menú principal.

Toma tres parámetros: 

• etiqueta: El texto que se mostrará como título del menú.
• button_type: Para especificar el tipo de botón.
• menú: Para especificar el menú de las opciones disponibles para elegir.

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Dropdown
 
output_file("dropdown_menu.html")
 
menu = [("Item 1", "item_1"), ("Item 2", "item_2"),
        ("Item 3", "item_3")]
dropdown_menu = Dropdown(label = "Dropdown button",
                         button_type = "warning",
                         menu = menu)
 
show(widgetbox(dropdown_menu))

Producción: 

Grupo de botones de casilla de verificación

A través de este widget, podemos seleccionar múltiples opciones a la vez.

Aquí se dan dos parámetros:

• etiquetas: Para especificar el nombre de las opciones a seleccionar.
• activo: para definir cuál de las opciones se seleccionará a la vez (como 0 para la primera opción, 1 para la segunda, etc.).

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import CheckboxButtonGroup
 
output_file("checkbox_button.html")
 
cbg= CheckboxButtonGroup(
        labels=["Apple", "Samsung", "Lenovo"], active=[0, 1])
 
show(widgetbox(cbg))

Producción:

Grupo de botones de opción

Este widget permite seleccionar como máximo un botón a la vez.

Parámetros:

• etiquetas: Para definir el nombre de las opciones.
• activo: aquí podemos dar solo un valor porque en el grupo de botones de opción solo se puede seleccionar un botón a la vez.

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import RadioButtonGroup
 
output_file("radio_button.html")
 
radio_button = RadioButtonGroup(
        labels = ["Apple", "Mango", "Orange"],
  active = 0)
 
show(widgetbox(radio_button))

Producción:

Seleccione

Es un widget de selección única que permite seleccionar un valor único de una lista de opciones.

Los parámetros utilizados aquí son:

• título: para especificar el título del widget de selección.
• valor: Se utiliza para especificar qué valor de las opciones a seleccionar.
• opciones: Para especificar las opciones que estarán disponibles.

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Select
 
output_file("single_select.html")
 
select = Select(title="Option:", value="Blue",
                options=["Red", "Yellow", "Blue", "Green"])
 
show(widgetbox(select))

Producción:

Deslizador

El control deslizante tiene parámetros como valor inicial o final, tamaño de paso, valor inicial y un título.

• inicio: desde qué valor debe comenzar el control deslizante.
• final: el valor final donde se detiene el control deslizante.
• valor: en qué valor se detendrá el control deslizante.
• paso: Este parámetro especifica que el valor del paso significa el salto entre los valores.
• título: el título del valor en el que se detiene el control deslizante.

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Slider
 
output_file("slider.html")
 
slider = Slider(start = 0, end = 12,
                value = 5, step = .1,
                title = "Average")
 
show(widgetbox(slider))

Producción:

Entrada de texto

Este widget se utiliza para recopilar una línea de texto del usuario.

• valor: Inicialmente, lo que debe mostrarse antes de tomar la entrada del usuario.
• title: Título de los widgets TextInput.

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import TextInput
 
output_file("text_input.html")
 
text = TextInput(value = "",
                title = "Label:")
 
show(widgetbox(text))

Producción:

Párrafo

Se utiliza para mostrar un bloque de texto.

• texto: Texto que se va a mostrar.
• ancho: alto: para especificar el ancho y alto del widget de párrafo.

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Paragraph
 
output_file("para.html")
 
para = Paragraph(text = """Encryption is the process of converting
normal message (plaintext) into meaningless message (Cipher text).
Whereas Decryption is the process of converting meaningless message
(Cipher text) into its original form (Plaintext).""",
width = 250, height = 80)
 
show(widgetbox(para))

Producción:

Entrada de área de texto

Esto se utiliza para almacenar varias líneas de texto de los usuarios.

• value: el valor predeterminado del widget Textarea.
• filas: Número de filas que se darán como espacio para la entrada de texto.
• título: Para especificar el título del widget Textarea.

from bokeh.io import show
from bokeh.models import TextAreaInput
 
text_area = TextAreaInput(value = "Write here",
                          rows = 6, title = "Label:")
show(text_area)

Producción: 

Entrada de contraseña:

Esto oculta la entrada de texto ingresada que se usa para ingresar la contraseña.

• marcador de posición: una breve sugerencia sobre los datos que se deben ingresar en el área de entrada y cuándo se eliminará el valor ingresado por el usuario.

from bokeh.io import show
from bokeh.models import PasswordInput
 
password = PasswordInput(placeholder = "Enter password...")
show(password)

Producción:

Pretexto:

Se utiliza para mostrar texto con formato previo.

• texto: Texto que se va a mostrar.
• ancho, alto: Para especificar el ancho y alto del widget.

from bokeh.io import show
from bokeh.models import PreText
 
pretext = PreText(text="""Encryption is the process of converting
normal message (plaintext) into meaningless message (Cipher text).
Whereas Decryption is the process of converting meaningless message
(Cipher text) into its original form (Plaintext)""",
width = 500, height = 120)
 
show(pretext)

Producción:

Grupo de radio:

Es una colección de cajas de radio.

• etiquetas: Para especificar el valor de las opciones disponibles para seleccionar.
• activo: Valor por defecto que se muestra como seleccionado antes de elegir cualquier opción.

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import RadioGroup
 
output_file("radio_group.html")
 
radio_g = RadioGroup(
        labels = ["AI", "ML", "Deep Learning"],
  active = 1)
 
show(widgetbox(radio_g))

Producción: 

División:

Es una pequeña sección o contenedor en el que se pueden hacer varios estilos de esa sección.

• texto: Contenido que se va a mostrar.
• ancho, alto: Para especificar el ancho y alto de este widget.

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Div
 
output_file("div.html")
 
div = Div(text="""<a href="https://www.geeksforgeeks.org/python-programming-language/">
Python</a> is <b>high level</b> programming language.
Its easy to learn because of its syntax.""",
width = 250, height = 100)
 
show(widgetbox(div))

Producción:

Palanca

Se utiliza para mostrar el estado activado/desactivado del botón o para cambiar la configuración entre estos dos estados.

• etiqueta: Texto que se mostrará como título del botón.
• button_type: Para especificar el color del botón.
• ancho, alto: Para especificar el ancho y alto del botón.

from bokeh.io import output_file, show
from bokeh.models.widgets import Toggle
 
output_file("toggle.html")
 
toggle = Toggle(label = "Switch",
                button_type = "success",
                width = 250, height = 100)
 
show(toggle)

Producción:

Entrada de archivo:

Esto permite al usuario elegir un archivo y almacenar su información.

from bokeh.io import show
from bokeh.models.widgets import FileInput
 
file = FileInput()
 
show(file)

Producción:

Hilandero:

Proporciona una forma rápida de seleccionar un valor de un conjunto. En este widget, hemos utilizado diferentes bibliotecas como NumPy, etc.

• np.random.rand: Para generar números aleatorios.
• figure: Para hacer una figura para un diagrama de dispersión.

En el constructor de spinner se dan diferentes parámetros como:

• title: Por dar título a spinner.
• bajo, alto: para especificar el valor más bajo y más alto posible permitido para aumentar el tamaño de los puntos en el menú desplegable.
• paso: Este parámetro especifica que el valor del paso significa el salto entre los valores.
• valor: valor predeterminado para el menú.
• ancho: Para definir el ancho de la ruleta.

Y aquí hemos vinculado dos propiedades del modelo bokeh usando devoluciones de llamada js personalizadas (js_link) para actualizar las propiedades del modelo cada vez que se realizan ciertas acciones.

import numpy as np
 
from bokeh.io import show
from bokeh.layouts import column, row
from bokeh.models import Spinner
from bokeh.plotting import figure
 
x = np.random.rand(10)
y = np.random.rand(10)
 
a = figure(x_range=(0, 1), y_range=(0, 1))
points = a.scatter(x = x, y = y, size = 4)
 
spinner = Spinner(title="Glyph size", low = 1,
                  high = 40, step = 0.5, value = 4, width = 80)
spinner.js_link('value', points.glyph, 'size')
 
show(row(column(spinner, width = 100), a))

Producción:

Pestañas:

Este widget permite mostrar varias parcelas en paneles configurables. El diseño de este widget consta de dos modelos de bokeh, es decir, Tab() y Panel().

Aquí hemos usado figure() para hacer una figura para trazar y Panel() que es un contenedor que tiene título y control.

• circle(): para hacer un gráfico circular.
• line(): Para hacer un gráfico de líneas.

from bokeh.io import show
from bokeh.models import Panel, Tabs
from bokeh.plotting import figure
 
p1 = figure(plot_width=350, plot_height=300)
p1.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5],
          size = 20, color = "red", alpha = 0.5)
 
tab1 = Panel(child=p1, closable = True,
             title = "circle")
 
p2 = figure(plot_width = 350, plot_height = 300)
p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5],
        line_width = 3, color = "blue", alpha = 0.5)
tab2 = Panel(child = p2, closable = True, title = "line")
 
show(Tabs(tabs = [tab1, tab2]))

Producción:

Control deslizante de intervalo de fechas:

Se utiliza para seleccionar el intervalo de fechas con un control deslizante.

Los parámetros utilizados son:

• valor: El valor del intervalo de fechas predeterminado que se va a mostrar.
• inicio: para especificar el valor inicial desde donde debe comenzar el control deslizante.
• final: para especificar el valor final desde donde debe detenerse el control deslizante.

from datetime import date
from bokeh.io import show
from bokeh.models import CustomJS, DateRangeSlider
 
date_range= DateRangeSlider(value = (date(2020, 1, 9),
                                     date(2021, 1, 10)),
                            start = date(2019, 8, 12),
                            end = date(2021, 6, 9))
 
show(date_range)

Producción:

Selector de fechas:

Es un widget de selección de fecha basado en el calendario.

• title: Texto que se mostrará como título del widget.
• valor: valor predeterminado que se mostrará cuando las opciones no estén seleccionadas.
• min_date: fecha mínima significa a partir de qué mes y fecha comenzará el calendario.
• max_date: fecha máxima significa a partir de qué mes y fecha finalizará el calendario.

from bokeh.io import show
from bokeh.models import CustomJS, DatePicker
 
dp = DatePicker(title = 'Select date', value = "2021-06-09",
                min_date = "2020-10-01", max_date = "2021-12-31")
show(dp)

 Producción:

Tabla de datos:

Se basa en una cuadrícula elegante que toma componentes externos como fuentes de datos. Y cualquier gráfico que contenga estos datos se vinculará automáticamente con los gráficos y la tabla.

Aquí hemos hecho un diccionario para el valor de las columnas y luego mapeamos la lista de datos que está en forma de un diccionario con una columna usando la función ColumnDataSource(), luego hacemos el diseño de la columna usando TableColumn() con argumentos como-

• campo: la columna contiene qué valores.
• title: Título de la columna.
• formateador: para hacer que el formato de la columna de fecha sea como fecha.

El constructor DataTable contiene:

• fuente: Para definir los datos mapeados con la columna como fuente.
• Columna: Para especificar los valores de la columna.
• ancho, alto: Para definir el ancho, alto de la tabla.

from datetime import date
from random import randint
 
from bokeh.io import show
from bokeh.models import ColumnDataSource, DataTable, DateFormatter, TableColumn
 
data = dict(
        dates=[date(2021, 5, i+1) for i in range(10)],
        downloads=[randint(0, 130) for i in range(10)],
    )
source = ColumnDataSource(data)
 
columns = [
        TableColumn(field = "dates", title = "Date",
                    formatter = DateFormatter()),
        TableColumn(field = "downloads", title = "Downloads"),
    ]
data_table = DataTable(source = source, columns = columns,
                       width = 400, height = 280)
 
show(data_table)

Producción:

Selector de color:

Esto permite al usuario seleccionar el valor de color RGB.

• Figura: Para hacer una figura para trazar.
• plot.line: Se utiliza para hacer un gráfico de líneas.

from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import ColorPicker
from bokeh.plotting import Figure
 
plot = Figure(x_range=(0, 1), y_range=(0, 1),
              plot_width=350, plot_height=400)
line = plot.line(x=(0,1), y=(0,1), color="green",
                 line_width=4)
 
picker = ColorPicker(title="Line Color")
picker.js_link('color', line.glyph, 'line_color')
 
show(column(plot, picker))

Producción: