Biblioteca Bokeh de Python para visualización interactiva de datos

En este tutorial, aprenderemos a usar la biblioteca Bokeh en Python. La mayoría de ustedes habrá oído hablar de matplotlib, numpy, seaborn, etc., ya que son muy po...

Introducción

En este tutorial, vamos a aprender a usar la biblioteca Bokeh en Python. La mayoría de ustedes habrá oído hablar de matplotlib, numpy, seaborn, etc., ya que son bibliotecas de Python muy populares para gráficos y visualizaciones. Lo que distingue a Bokeh de estas bibliotecas es que permite la visualización dinámica, que es compatible con los navegadores modernos (porque genera gráficos usando JS y HTML) y, por lo tanto, puede usarse para aplicaciones web con un nivel muy alto de interactividad.

Bokeh también está disponible en lenguaje R y Scala; sin embargo, su contraparte de Python se usa más comúnmente que otras.

Instalación

La forma más fácil de instalar Boken usando Python es a través del administrador de paquetes pepita. Si tiene pip instalado en su sistema, ejecute el siguiente comando para descargar e instalar Bokeh:

1
$ pip install bokeh

Nota: si elige este método de instalación, ya debe tener numpy instalado en su sistema

Otro método para instalar Bokeh es a través de la distribución de Anaconda. Simplemente vaya a su terminal o símbolo del sistema y ejecute este comando:

1
$ conda install bokeh

Después de completar este paso, ejecute el siguiente comando para asegurarse de que su instalación fue exitosa:

1
$ bokeh --version

Si el comando anterior se ejecuta correctamente, es decir, la versión se imprime, puede continuar y usar la biblioteca bokeh en sus programas.

Ejercicios de codificación {#ejercicios de codificación}

En esta parte, haremos algunos ejemplos prácticos llamando a las funciones de la biblioteca de Bokeh para crear visualizaciones interactivas. Comencemos tratando de hacer un cuadrado.

Nota: Los comentarios en los códigos a lo largo de este artículo son muy importantes; no solo explicarán el código, sino que también transmitirán otra información significativa. Además, podría haber 'alternativa' o una funcionalidad adicional que estaría comentada, pero puede intentar ejecutarla descomentando esas líneas.

Trazado de formas básicas {#trazado de formas básicas}

Aquí especificamos las coordenadas x e y para los puntos, que se seguirán en secuencia cuando se dibuje la línea. La función figure instancia un objeto figure, que almacena las configuraciones del gráfico que desea trazar. Aquí podemos especificar tanto el rango X como el rango Y del gráfico, que establecemos de 0 a 4, que cubre el rango de nuestros datos. El método line luego dibuja una línea entre nuestras coordenadas, que tiene la forma de un cuadrado.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
from bokeh.io import output_file, output_notebook
from bokeh.plotting import figure, show

x = [1, 3, 3, 1, 1] 
y = [1, 1, 3, 3, 1]

# Display the output in a separate HTML file 
output_file('Square.html', title='Square in Bokeh')
#output_notebook() # Uncomment this line to use iPython notebook

square = figure(title='Square Shape',
             plot_height=300, plot_width=300,
             x_range=(0, 4), y_range=(0, 4))

# Draw a line using our data
square.line(x, y)
#square.circle(x, y) # Uncomment this line to add a circle mark on each coordinate

# Show plot
show(square)

Es posible que haya notado en el código que hay una alternativa a la función output_file, que mostraría el resultado en un cuaderno Jupyter utilizando la función output_notebook. Si prefiere usar un cuaderno, reemplace la función output_file con output_notebook en el código a lo largo de este artículo.

Cuando ejecute el script anterior, debería ver el siguiente cuadro abierto en una nueva pestaña de su navegador predeterminado.

Producción:

trazado cuadrado{.img-responsive}

En la imagen de arriba, puede ver las herramientas en el lado derecho (panorámica, zoom de cuadro, zoom de rueda, guardar, restablecer, ayuda, de arriba a abajo); estas herramientas le permiten interactuar con el gráfico.

Otra cosa importante que será útil es que después de cada llamada a la función "mostrar" si crea un nuevo objeto "figura", una llamada posterior a la función "mostrar" con la nueva figura pasada como un argumento generaría un error. Para resolver ese error, ejecute el siguiente código:

1
2
3
from bokeh.plotting import reset_output

reset_output()

El método reset_output restablece el ID de la figura que la función show tiene actualmente para que se le pueda asignar uno nuevo.

Lo que hemos hecho hasta ahora es bastante básico, intentemos ahora hacer varias ecuaciones de líneas/mapas en un solo gráfico. El ejemplo más básico sería tratar de dibujar líneas para las ecuaciones y = x, y = x^2 y y = x^3. Entonces, veamos cómo podemos hacer un gráfico para mostrarlos todos a la vez usando Bokeh:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
from bokeh.plotting import figure, output_file, show

# Declare data for our three lines
x = [1, 2, 3, 4, 5, 6]
x_square = [i**2 for i in x]
x_cube = [i**3 for i in x]

# Declare HTML file as output for when show is called
output_file("Eqs.html")

lines = figure(title='Line Comparisons', x_range=(0, 8), y_range=(0,100),
   x_axis_label='X-Axis', y_axis_label='Y-Axis') 

lines.line(x, x, legend="y = x", line_width=3) # Line for the equation y=x
lines.square(x, x, legend="y = x", size=10) # Add square boxes on each point on the line

lines.line(x, x_square, legend="y = x^2", line_width=3) #Line for the equation y=x^2
lines.circle(x, x_square, legend="y = x^2", size=10) # Add circles to points since it partially overlaps with y=x

lines.line(x, x_cube, legend="y = x^3", line_width=3) # Line for the equation y=x^3
lines.square(x, x_cube, legend="y = x^2", size=10) # Add square boxes on each point of the line

# Display the graph
show(lines)

Producción:

gráfico de comparación de líneas{.img-responsive}

Antes de continuar trazando algunos gráficos más, primero aprendamos algunos trucos geniales para hacer que sus gráficos sean más interactivos y estéticos. Para eso, en primer lugar, aprenderemos sobre las diferentes herramientas que utiliza la Biblioteca Bokeh, además de las que se muestran al lado (ya sea en la parte superior o en el lado derecho) del gráfico. Las explicaciones se proporcionarán en los comentarios del código a continuación:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# Use the same plot data as above
x = [1, 2, 3, 4, 5, 6]
x_square = [i**2 for i in x]
x_cube = [i**3 for i in x]

#now let's make the necessary imports. Note that, in addition to the imports we made in the previous code, we'll be importing a few other things as well, which will be used to add more options in the 'toolset'. 

# Same imports as before
from bokeh.plotting import figure, output_file, show

# New imports to add more interactivity in our figures
# Check out Bokeh's documentation for more tools (these are just two examples)
from bokeh.models import HoverTool, BoxSelectTool

output_file("Eqs.html")

# Add the tools to this list
tool_list = [HoverTool(), BoxSelectTool()]

# Use the tools keyword arg, otherwise the same
lines = figure(title='Line Comparisons', x_range=(0, 8), y_range=(0, 100),
   x_axis_label='X-Axis', y_axis_label='Y-Axis', tools=tool_list)

# The rest of the code below is the same as above
lines.line(x, x, legend="y = x", line_width=3)
lines.square(x, x, legend="y = x", size=10)

lines.line(x, x_square, legend="y = x^2", line_width=3)
lines.circle(x, x_square, legend="y = x^2", size=10)

lines.line(x, x_cube, legend="y = x^3", line_width=3)
lines.square(x, x_cube, legend="y = x^2", size=10)

# Display the graph
show(lines)

Producción:

herramientas extra{.img-responsive}

En la imagen de arriba, puede ver las dos opciones adicionales agregadas a las herramientas disponibles anteriormente. Ahora también puede pasar el cursor sobre cualquier punto de datos y se mostrarán sus detalles, y también puede seleccionar un determinado grupo de puntos de datos para resaltarlos.

Manejo de datos categóricos con bokeh

Lo siguiente que aprenderemos a hacer usando la biblioteca Bokeh es manejar datos categóricos. Para eso, primero intentaremos hacer un gráfico de barras. Para hacerlo interesante, intentemos crear un gráfico que represente el número de copas mundiales ganadas por Argentina, Brasil, España y Portugal. ¿Suena interesante? Vamos a codificarlo.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
from bokeh.io import show, output_file
from bokeh. plotting import figure

output_file("cups.html")

# List of teams to be included in the chart. Add or
# remove teams (and their World Cups won below) to
# see how it affects the chart
teams = ['Argentina', 'Brazil', 'Spain', 'Portugal']

# Activity: We experimented with the Hover Tool and the
# Box Select tool in the previous example, try to
# include those tools in this graph

# Number of world cups that the team has won
wc_won = [5, 3, 4, 2]

# Setting toolbar_location=None and tools="" essentially
# hides the toolbar from the graph
barchart = figure(x_range=teams, plot_height=250, title="WC Counts",
           toolbar_location=None, tools="")

barchart.vbar(x=teams, top=wc_won, width=0.5)

# Acitivity: Play with the width variable and see what
# happens. In particular, try to set a value above 1 for
# it 

barchart.xgrid.grid_line_color = 'red'
barchart.y_range.start = 0

show(barchart)

Producción:

Gráfico de recuento de copas del mundo{.img-responsive}

¿Notas algo en el gráfico de arriba? Es bastante simple y poco impresionante, ¿no? Hagamos algunos cambios en el código anterior y hagámoslo un poco más colorido y estético. Bokeh tiene muchas opciones para ayudarnos con eso. Veamos qué podemos hacer con él:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# Mostly the same code as above, except with a few
# additions to add more color to our currently dry graph

from bokeh.io import show, output_file
from bokeh.plotting import figure

# New imports below
from bokeh.models import ColumnDataSource

# A was added 4 to the end of Spectral because we have 4
# teams. If you had more or less you would have used that
# number instead
from bokeh.palettes import Spectral4

from bokeh.transform import factor_cmap

output_file("cups.html")

teams = ['Argentina', 'Brazil', 'Spain', 'Portugal']
wc_won = [5, 3, 4, 2]

source = ColumnDataSource(data=dict(teams=teams, wc_won=wc_won, color=Spectral4))

barchart = figure(x_range=teams, y_range=(0,8), plot_height=250, title="World Cups Won",
           toolbar_location=None, tools="")

barchart.vbar(x='teams', top='wc_won', width=0.5, color='color', legend='teams', source=source) 

# Here we change the position of the legend in the graph
# Normally it is displayed as a vertical list on the top
# right. These settings change that to a horizontal list
# instead, and display it at the top center of the graph
barchart.legend.orientation = "horizontal" 
barchart.legend.location = "top_center"

show(barchart)

Producción:

Gráfico de conteo de la Copa Mundial mejorado{.img-responsive}

Evidentemente, el nuevo gráfico se ve mucho mejor que antes, con mayor interactividad.

Antes de concluir este artículo, me gustaría que todos sepan que esto fue solo un vistazo de la funcionalidad que ofrece Bokeh. Hay muchas otras cosas geniales que puedes hacer con él, y deberías probarlas consultando documentación de bokeh y siguiendo los ejemplos disponibles.

Aunque, hay muchos otros grandes recursos además de la documentación, como Visualización de datos en Python. Aquí obtendrá una guía aún más detallada de Bokeh, así como otras 8 bibliotecas de visualización en Python.

Conclusión

Para resumir, en este tutorial aprendimos sobre la variante Python de la biblioteca Bokeh. Vimos cómo descargarlo e instalarlo usando la distribución pip o anaconda. Usamos los programas de la biblioteca Bokeh para hacer visualizaciones interactivas y dinámicas de diferentes tipos y también usar diferentes tipos de datos. También aprendimos, viendo ejemplos prácticos, la razón por la que se necesita Bokeh a pesar de que existen otras bibliotecas de visualización más populares como matplotlib y nacido en el mar disponible. En resumen, Bokeh es muy ingenioso y puede hacer prácticamente todo tipo de visualizaciones interactivas que desee.