Comment ajouter un surlignage au survol à un graphique en escalier Bokeh

Question

Je travaille pour essayer de reproduire un code similaire au deuxième graphique de ce http://fortune.com/fortune500/visualizations/?iid=recirc_f500landing-zone1

Il existe le graphique Step par défaut dans Bokeh, mais il ne me permet pas d'ajouter des glyphes.

J'aimerais coder quelque chose comme ceci

from bokeh.charts import Step, show, output_file

# construire un jeu de données où plusieurs colonnes mesurent la même chose
data = dict(
       stamp=[.33, .33, .34, .37, .37, .37, .37, .39, .41, .42,
              .44, .44, .44, .45, .46, .49, .49],
       postcard=[.20, .20, .21, .23, .23, .23, .23, .24, .26, .27,
                 .28, .28, .29, .32, .33, .34, .35]
   )

# créer un graphique en escalier où chaque colonne de mesures reçoit une couleur et un style de tiret unique
step = Step(data, y=['stamp', 'postcard'],
        dash=['stamp', 'postcard'],
        color=['stamp', 'postcard'],
        title="Tarifs postaux aux États-Unis (1999-2015)",
        ylabel='Tarif par once', legend=True)

selected_line = Line(line_alpha=1, line_color="firebrick")
nonselected_line = Line(line_alpha=0.2, line_color="blue")

step.add_glyph(data,
           step,
           selection_glyph=selected_line,
           nonselection_glyph=nonselected_line
)

output_file("steps.html")

show(step)

J'ai essayé chaque méthode de cette page http://bokeh.pydata.org/en/latest/docs/user_guide/styling.html#selected-and-unselected-glyphs est-il possible de construire ce graphique sans la bibliothèque Chart?

Answer 1

Graphique en étapes Pour créer cela sans la bibliothèque bokeh.charts, vous pouvez simplement utiliser plusieurs lignes, voir http://bokeh.pydata.org/en/latest/docs/user_guide/plotting.html#multiple-lines. Vous devez simplement créer manuellement la valeur x correspondante pour chaque y.

Essentiellement, si la valeur y change, elle doit avoir la même valeur x que la valeur y précédente, sinon incrémentez la valeur x. Cela devrait créer les bonnes données.

Surbrillance au survol : Vous pouvez obtenir un effet assez proche de celui désiré en utilisant le glyphe de ligne multiple. Il dispose d'un paramètre de couleur et d'opacité au survol intégré, donc cela est pris en charge assez facilement. La seule chose qu'il ne fait pas est de se fixer sur la ligne la plus proche. Je ne suis pas sûr si c'est possible sans javascript personnalisé, mais je pourrais me tromper.

Code d'exemple ci-dessous.

from bokeh.plotting import figure, show
from bokeh.models import HoverTool
from bokeh.models import ColumnDataSource

p = figure(plot_width=400, plot_height=400,y_range=(0.2,0.5))

y_vals = [0.22,0.22,0.25,0.25,0.26,0.26,0.27,0.27]
y_vals2 = [y*1.4 for y in y_vals]
x_vals = [0,1,1,2,2,2,2,3]
data_dict = {'x':[x_vals,x_vals],
             'y':[y_vals,y_vals2],
             'color':["firebrick", "navy"],
             'alpha':[0.1, 0.1]}

source = ColumnDataSource(data_dict)

p.multi_line('x','y',source=source,
             color='color', alpha='alpha', line_width=4,
             hover_line_alpha=1.0,hover_line_color='color')

p.add_tools(HoverTool(show_arrow=False,
                      line_policy='nearest',
                      tooltips=None))
show(p)