Utilisation de bokeh pour tracer le camembert interactif dans Jupyter/Python

Question

Je suis nouveau à Bokeh et j'apprécierais vraiment de l'aide dans la détermination de l'utilisation de Bokeh pour tracer un graphique circulaire interactif simple dans Jupyer/Python. Je prévois d'utiliser 'CustomJS avec une fonction Python' dans Bokeh comme expliqué au bas de la page here. Le camembert se compose de deux entrées avec un curseur qui peut changer la forme d'un camembert 'v2' à l'intérieur de la forme du cercle de (v1 + v2). J'ai essayé de suivre l'exemple du site Web de bokeh qui montre l'interactivité avec une intrigue sinusoïdale, mais je ne peux tout simplement pas l'obtenir pour fonctionner avec mon diagramme à secteurs. Toute aide serait grandement appréciée. Voici le bloc de code que j'utilise dans un cahier Jupyter.

import numpy as np 
 
import matplotlib.pyplot as plt 
 
from bokeh.layouts import column 
 
from bokeh.models import CustomJS, ColumnDataSource, Slider 
 
from bokeh.plotting import Figure, output_file, show, output_notebook 
 
from bokeh.charts import Donut, show 
 

 
#output_file('donut.html') 
 
output_notebook() 
 

 
v1=1 
 
v2=.2 
 
import pandas as pd 
 
data = pd.Series([v1,v2], index = list('ab')) 
 
plot = Figure(plot_width=400, plot_height=400) 
 
plot = Donut(data) 
 
    
 
    
 
def pie_chart(source=data,window=None,deltav=None): 
 
    data = source.data 
 
    v2 = deltav.value 
 
    #v2 = data['v2'] 
 
    source.trigger('change') 
 
    
 
slider = Slider(start=.1, end=1., value=.2, step=.1, title="delta-V", callback=CustomJS.from_py_func(pie_chart)) 
 
callback.args["deltav"] = slider 
 
    
 
l = column(slider, plot) 
 
show(l)

Answer 1

Si vous souhaitez mettre à jour de manière interactive les choses, alors vous serez mieux à l'aide du bokeh.plotting API. Pour des raisons techniques assez inintéressantes, l'API bokeh.charts (y compris Donut) n'est pas adaptée aux cas d'utilisation nécessitant la mise à jour des éléments.

Avec bokeh.plotting, il existe un wedge glyph method que vous pouvez utiliser pour dessiner des diagrammes circulaires. Voici un exemple complet écrit (en utilisant Bokeh 0.12.5) qui met à jour un diagramme circulaire avec un curseur:

from math import pi 

from bokeh.io import output_file, show 
from bokeh.layouts import column 
from bokeh.models import ColumnDataSource, CustomJS, Slider 
from bokeh.plotting import figure 

output_file("pie.html") 

source = ColumnDataSource(data=dict(
    start=[0, 0.2], end=[0.2, 2*pi], color=['firebrick', 'navy'] 
)) 

plot = figure() 
plot.wedge(x=0, y=0, start_angle='start', end_angle='end', radius=1, 
     color='color', alpha=0.6, source=source) 

slider = Slider(start=.1, end=1., value=.2, step=.1, title="delta-V") 

def update(source=source, slider=slider, window=None): 
    data = source.data 
    data['end'][0] = slider.value 
    source.trigger('change') 

slider.js_on_change('value', CustomJS.from_py_func(update)) 

show(column(slider, plot)) 

Il est un peu plus bavard que la version Donut, mais la relation entre les structures de données sur la côté python et côté JS sont beaucoup plus clairs et directs.

Answer 2

Toutes ces suggestions ont aidé! Merci beaucoup.

Je reviens avec une petite torsion à ma question originale. Maintenant, je voudrais effectuer le même intrigue interactive en utilisant le serveur bokeh. J'ai tordu the sine plot example with sliders pour générer le code ci-dessous pour le problème de carte de donut de la mienne. Quand je le sers avec le service de bokeh, j'obtiens une erreur avec la définition de 'données' dans mon code. Je pense que je suis proche mais manque un pas mineur.

''' Present an interactive function explorer with slider widgets. 
 

 
Scrub the slider to change the pie shape in the donut plot 
 

 
Use the ``bokeh serve`` command to run the example by executing: 
 

 
    bokeh serve donuts.py 
 

 
at your command prompt. Then navigate to the URL 
 

 
    http://localhost:5006/donuts 
 

 
in your browser. 
 

 
''' 
 
import numpy as np 
 

 
from bokeh.io import curdoc 
 
from bokeh.layouts import row, widgetbox 
 
from bokeh.models import ColumnDataSource 
 
from bokeh.models.widgets import Slider, TextInput 
 
from bokeh.plotting import figure 
 
from math import pi 
 

 
# Set up data 
 
source = ColumnDataSource(data=dict(
 
    start=[0, 0.], end=[0., 2*pi], color=["black", "red"] 
 
)) 
 

 
# Set up plot 
 
plot = figure(x_axis_location=None, y_axis_location=None, plot_width=400, plot_height=400,) 
 
plot.annular_wedge(x=0, y=0, start_angle='start', end_angle='end', inner_radius=.4, outer_radius=.8, 
 
     color="color", alpha=.7, source=source) 
 
#plot.background_fill_color = None 
 
plot.xgrid.grid_line_color = None 
 
plot.ygrid.grid_line_color = None 
 

 
# Set up widgets 
 
slider = Slider(start=.0, end=round(2*pi,2), value=.2, step=.1, title="delta-V") 
 

 
# Set up callbacks 
 
    
 
def update(attrname, old, new): 
 
    
 
    # Get the current slider values 
 
    data['end'][0] = slider.value 
 
    source.data = dict(start=start, end=end, color=color) 
 

 
for w in [slider]: 
 
    w.on_change('value', update) 
 

 

 
# Set up layouts and add to document 
 
inputs = widgetbox(slider) 
 

 
curdoc().add_root(row(inputs, plot, width=800)) 
 
curdoc().title = "Donut"

Answer 3

Je pense avoir trouvé ma réponse. Voici le code dans le cas où il aide

''' Present an interactive function explorer with slider widgets. 
 

 
Scrub the slider to change the pie shape in the donut plot 
 

 
Use the ``bokeh serve`` command to run the example by executing: 
 

 
    bokeh serve donuts.py 
 

 
at your command prompt. Then navigate to the URL 
 

 
    http://localhost:5006/donuts 
 

 
in your browser. 
 

 
''' 
 
import numpy as np 
 

 
from bokeh.io import curdoc 
 
from bokeh.layouts import row, widgetbox 
 
from bokeh.models import ColumnDataSource 
 
from bokeh.models.widgets import Slider, TextInput 
 
from bokeh.plotting import figure 
 
from math import pi 
 

 
# Set up data 
 
source = ColumnDataSource(data=dict(
 
    start=[0, 0], end=[0., 2*pi], color=["white", "red"] 
 
)) 
 

 
# Set up plot 
 
plot = figure(x_axis_location=None, y_axis_location=None, plot_width=400, plot_height=400,) 
 
plot.annular_wedge(x=0, y=0, start_angle='start', end_angle='end', inner_radius=.4, outer_radius=.8, 
 
     color="color", alpha=1., source=source) 
 
#plot.background_fill_color = None 
 
plot.xgrid.grid_line_color = None 
 
plot.ygrid.grid_line_color = None 
 

 
# Set up widgets 
 
slider = Slider(start=.0, end=round(2*pi,2), value=.0, step=.1, title="delta-V") 
 

 
# Set up callbacks 
 
    
 
def update(attrname, old, new): 
 
    
 
    # Get the current slider values 
 
    z = slider.value 
 
    source.data = dict(start=[pi,pi+z], end=[pi+z, pi], color=["yellow", "red"]) 
 

 
for w in [slider]: 
 
    w.on_change('value', update) 
 

 

 
# Set up layouts and add to document 
 
inputs = widgetbox(slider) 
 

 
curdoc().add_root(row(inputs, plot, width=800)) 
 
curdoc().title = "Donut"