<jupyter_start><jupyter_text>--- Universidad de Costa Rica IE0405 - Modelos Probabilísticos de Señales y Sistemas--- `Py18` - *Grafiación avanzada con HTML (Con Bokeh)*> Bokeh es una librería de visualización interactiva para navegadores de internet modernos. Provee una construcción elegante y consisa de gráficos versátiles que soporta interacción de alto desempeño a través grandes grupos de datos. Bokeh es útil para cualquier persona cuyas intenciones de realizar rápidas y sencillas aplicaciones interactivas de gráficos, cuadros de mando y aplicaciones con datos.> **Nota 1**: Para usar la librería `bokeh`, primero la debe instalar en su computadora via `pip` usando el comando `pip install bokeh`>Si no tiene experiencia instalando paquetes via pip se recomienda ver este corto video: https://youtu.be/o6aOqkmrrb4---  Utilizando Bokeh en Jupyter *Impresión de gráficos*Para imprimir gráficos dentro de un documento clásico de Jupyter, se debe utilizar el comando `output_notebook()` de bokek.io, en lugar de (o junto con) el comando `output_file()` de bokeh.plotting ya que, este último únicamente abre una nueva ventana con la sesión interactiva de Bokeh.A continuación un ejemplo de lo mencionado:<jupyter_code>from bokeh.plotting import figure, output_file, show
from bokeh.io import output_notebook

# Preparación de los datos
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

output_notebook()
# Creación de un nuevo gráfico con un título y etiqueta en los ejes
p = figure(title="Simple línea de ejemplo", x_axis_label='x', y_axis_label='y')

#  Agregar una leyenda y definir el grosor de la línea
p.line(x, y, legend_label="Datos.", line_width=3)

show(p)<jupyter_output><empty_output><jupyter_text>Para el siguiente ejemplo, se graficarán tres puntos en un gráfico con un tamaño previamente configurado, permitiendo la interacción con el mismo en el mismo notebook y asignando la figura a una variable para actualizarla más adelante en el código.<jupyter_code>from bokeh.layouts import row
from bokeh.io import push_notebook
# Iniciamos definiendo las dimensiones de los gráficos en forma de diccionario para definir los parámetros
dim = dict(plot_width = 250, plot_height = 250, min_border = 0)

# Luego se crean las figuras con las dimensiones previstas:
p1 = figure(**dim)
r1 = p1.circle([1,2,3],[4,5,6], size = 20)
# Para propósitos del ejemplo, se harán dos gráficos distintos
p2 = figure(**dim)
r2 = p2.square([1,2,3],[6,5,4], size = 15)

# Se asigna este gráfico a una variable para poder actualizar los datos en una futura instancia
t = show(row(p1,p2), notebook_handle = True)<jupyter_output><empty_output><jupyter_text>Una vez asignada la figura a una variable, se pueden realizar modificaciones en el color y forma del gráfico referenciando esa misma figura y los cambios se aplicaran a esa misma figura, sin necesidad de imprimir el gráfico nuevamente. Por ejemplo, para actualizar el color de los cuadros a rojo, se utiliza el siguiente código:<jupyter_code># Definimos el cambio que queremos aplicar
r2.glyph.fill_color = "red"
# Realizamos el cambio utilizando el comando push (como en GitHub)
push_notebook(handle = t)<jupyter_output><empty_output><jupyter_text>Para la interacción con el gráfico, existen herramientas útiles como el `HoverTool` de la función `bokeh.models`. Para ilustrar el uso de esta herramienta, se creará un gráfico con datos al azar (utilizando la librería `Numpy`) y diversos colores, con el cuál se podrá interactuar resaltando un único dato al seleccionarlo con el mouse. Este tipo de funcionalidad es útil cuando tenemos muchos datos y queremos explorar sus valores visualmente para su debida interpretación.<jupyter_code>import numpy as np
from bokeh.models import HoverTool

# Definimos el número de puntos
N = 1000
# Creamos los puntos en x y en y
x = np.random.random(size = N) * 100
y = np.random.random(size = N) * 100
# Com deseamos diversos tamaños de radios, creamos datos aleatorios para los puntos que representarán los datos
radios = np.random.random(size = N) * 2
# Lo mismo para los colores
colores = ["#%02x%02x%02x" % (int(r), int(g), 150) for r, g in zip(20+2*x, 10+2*y)]

# También podemos especificar cuáles herramientas queremos disponibles
# en la figura. 
herramientas = "crosshair, pan ,wheel_zoom, box_zoom, reset, tap, box_select, lasso_select"

# Una vez definidos los datos y las configuraciones, procedemos a crear la figura
p = figure(tools = herramientas)
# Configuramos la función de seleccionar con el mouse y definimos la información que queremos deplegar con sólo posicionar 
# el mouse sobre un punto. En este caso queremos conocer: El índice, las coordenadas, el radio del círculo y el número del color
hover = HoverTool(tooltips =  [
    ("index", "$index"),
    ("(x,y)", "($x, $y)"),
    ("radius", "@radius"),
    ("fill color", "$color[hex, swatch]:fill_color"),
], mode = "vline")
p.add_tools(hover)
r = p.circle(x,y, radius=radios, 
             fill_color=colores, fill_alpha=0.6, line_color=None, 
             hover_fill_color="black", hover_fill_alpha=0.7, hover_line_color=None)

# Finalmente, definimos una variable para esta figura, para poder actualizarla más adelante
target = show(p, notebook_hand = True)<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.07921359037984348, 'fraction_numerical': 0.015651841954571484, 'mean_word_length': 5.201183431952662, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 20, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '4', 'dir': 'jupyter-structured-clean-dedup', 'id': '474069', 'license': 'CC0-1.0', 'n_tokens_mistral': 1862, 'n_tokens_neox': 1796, 'n_words': 676, 'path': 'Py18.ipynb', 'repo_name': 'jonixrojas/mpss', 'size': '5239'}