Bokeh¶

Bokeh est une plateforme de visualisation interactif. Avec seulement quelques lignes de code en Python, vous pouvez créer des graphes interactifs.

vous définissez votre fonctionnalité en Python
un module BokehJS en JavaScript visualize votre graphe dans une page web

from bokeh.io import output_notebook, show
output_notebook()

Loading BokehJS ...

Exercice
Si vous constatez un ModuleNotFoundError vous devez installer le module bokeh. Dans Thonny choisissez le menu Outils > Gérer les paquets… et installez le paquet nécessaire. Vous pouvez aussi executer la commande pip ceci dans une cellule code.

pip install bokeh

Pour installer le module pandas

pip install pandas

Pour la mise à jour de pip

pip install --upgrade pip

Une simple courbe¶

Importez les fonctions figure et show.

from bokeh.plotting import figure

Créez les données.

x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

Créez une figure avec un titre et des légendes.

p = figure(title="Simple courbe", 
           plot_height=300,
           x_axis_label='temps (heures)', 
           y_axis_label='temperature (degrés)')

Ajoutez une courbe (ligne).

p.line(x, y, legend_label="Temp.", line_width=5)

GlyphRenderer(

id = '1340', …)

Affichez la figure.

show(p)

Ce graphe simple a des fonctions interactives. Utilisesz les 7 outils pour interagir avec le graphique:

ouvrir le site Bokeh
déplacer le contenu (pan)
zoomer
zoomer avec la roulotte
enregistrer
remettre à zéro
trouver de l’aide

Les étapes sont:

importer le module bokeh
créer les données
créer une figure
ajouter un glyphe (line, circle, …)
afficher la figure

Graphes multiples¶

Multiples glyphes peuvent être ajouté à une figure.

x = [1, 2, 3, 4, 5]
y1 = [6, 7, 2, 4, 5]
y2 = [2, 3, 4, 5, 6]
y3 = [4, 5, 5, 7, 2]

p = figure(title="Courbes multiples", plot_height=250)

# add multiple renderers
p.line(x, y1, legend_label="Temp.", line_color="blue", line_width=2)
p.line(x, y2, legend_label="Rate", line_color="red", line_width=2)
p.line(x, y3, legend_label="Objects", line_color="green", line_width=2)

show(p)

En résumé

préparer des données
créer une figure()
ajouter les éléments graphiques
afficher /en HTML)

Configurer¶

p = figure(plot_height=250)
p.circle(x, y, size=30)
show(p)

p = figure(title="Courbes multiples", plot_height=250)

# add multiple renderers
p.line(x, y1, legend_label="Temp.", line_color="blue", line_width=2)
p.vbar(x=x, top=y2, legend_label="Rate", width=0.2, bottom=0, color="red")
p.circle(x, y3, legend_label="Objects", line_color="yellow", size=12)

show(p)

# create a new plot with default tools, using figure
p = figure(plot_height=250)

# add a circle renderer with x and y coordinates, size, color, and alpha
p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], 
         size=15, line_color="navy", fill_color="orange", fill_alpha=0.5)

show(p) # show the results

p = figure(plot_height=250)
p.vbar(x=x, top=y1, legend_label="Rate", width=0.3, color="red", fill_alpha=0.5,)
show(p)

Spécifier couleur¶

p = figure(plot_height=250)
p.vbar(x=x, top=y1, legend_label="Rate", width=0.3, color=("red", 'blue', (255, 0, 255), '#00ff00', 'pink'), fill_alpha=0.5,)
show(p)

Changer des propriétés¶

p = figure(plot_height=250)
g = p.circle(
    x,
    y,
    legend_label="Objects",
    fill_color="red",
    fill_alpha=0.5,
    line_color="blue",
    line_width=5,
    size=80
)
show(p)

g.glyph.fill_color

'red'

g.glyph.fill_color = 'green'
show(p)

g.glyph.fill_color = 'yellow'
show(p)

Image RGB¶

import numpy as np

# create an array of RGBA data
N = 20
img = np.empty((N, N), dtype=np.uint32)
view = img.view(dtype=np.uint8).reshape((N, N, 4))
for i in range(N):
    for j in range(N):
        view[i, j, 0] = int(255 * i / N)
        view[i, j, 1] = 158
        view[i, j, 2] = int(255 * j / N)
        view[i, j, 3] = 255

p = figure(plot_height=250, x_range=(0, 10), y_range=(0, 10))
p.image_rgba(image=[img], x=[0], y=[0], dw=[10], dh=[10])

show(p)

img.shape

(20, 20)

Format des legendes¶

p = figure(title="Courbes multiples", plot_height=350)

# add multiple renderers
p.vbar(x=x, top=y2, legend_label="Rate", width=0.2, bottom=0, color="red")
p.circle(x, y3, legend_label="Objects", line_color="yellow", size=12)

# display legend in top left corner (default is top right corner)
p.legend.location = "top_left"

# add a title to your legend
p.legend.title = "Obervations"

# change appearance of legend text
p.legend.label_text_font = "courier"
p.legend.label_text_font_style = "italic"
p.legend.label_text_color = "navy"

# change border and background of legend
p.legend.border_line_width = 3
p.legend.border_line_color = "navy"
p.legend.border_line_alpha = 0.8
p.legend.background_fill_color = "yellow"
p.legend.background_fill_alpha = 0.2

# show the results
show(p)

Format du titre¶

# change headline location to the left
p.title_location = "left"

# change headline text
p.title.text = " headline text example "

# style the headline
p.title.text_font_size = "25px"
p.title.align = "left"
p.title.background_fill_color = "darkgrey"
p.title.text_color = "white"

# show the results
show(p)

from bokeh.models import BoxAnnotation

p = figure(title="Annotations", plot_height=350)
p.vbar(x=x, top=y2, legend_label="Rate", width=0.2, bottom=0, color="red")
p.circle(x, y3, legend_label="Objects", line_color="yellow", size=12)

p.legend.location = "top_left"
p.legend.background_fill_color = "yellow"

low_box = BoxAnnotation(top=2.5, fill_alpha=0.1, fill_color='red')
mid_box = BoxAnnotation(bottom=2.5, top=4.5, fill_alpha=0.1, fill_color='green')
high_box = BoxAnnotation(bottom=4.5, fill_alpha=0.1, fill_color='red')

p.add_layout(low_box)
p.add_layout(mid_box)
p.add_layout(high_box)

show(p)

Interface GUI¶

from bokeh.models import Button, CustomJS

button = Button(label="Foo", button_type="success")
button.js_on_click(CustomJS(code="console.log('button: click!', this.toString())"))

show(button)

from bokeh.models import CheckboxButtonGroup, CustomJS

LABELS = ["Option 1", "Option 2", "Option 3"]

checkbox_button_group = CheckboxButtonGroup(labels=LABELS, active=[0, 1])
checkbox_button_group.js_on_click(CustomJS(code="""
    console.log('checkbox_button_group: active=' + this.active, this.toString())
"""))

show(checkbox_button_group)

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_height=150)
line = plot.line(x=(0,1), y=(0,1), color="black", line_width=4)

picker = ColorPicker(title="Line Color")
picker.js_link('color', line.glyph, 'line_color')

show(column(plot, picker))

Education numérique