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).
Python3
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.
Python3
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.).
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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.
Python3
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:
Publicación traducida automáticamente
Artículo escrito por prachisharma1320 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA