CommencezCommencez gratuitement

Modifier des graphiques linéaires avec Select

Pour votre tâche finale, le fonds spéculatif vous demande de préparer des visualisations permettant d'analyser la performance boursière d'Electronic Arts.

Vous décidez que le composant Select est idéal, afin qu'ils puissent basculer entre les mesures suivantes : close, market_cap et volume.

Le jeu de données stocks a été filtré pour EA. Trois figures (close, market_cap et volume) et des jeux de glyphes (close_line, market_cap_line, volume) ont été créés pour chaque mesure et préchargés pour vous.

Cette activité fait partie du cours

Visualisation de données interactive avec Bokeh

Voir le cours

Instructions de l’exercice

  • Créez menu en appelant Select(), en passant une liste à l'argument options contenant "Close", "Market Cap" et "Volume" (dans cet ordre), en définissant value à "Close", et en donnant le titre "Metric".
  • Appelez une méthode appropriée de menu pour relier la "value" du composant à callback.
  • Appelez layout dans show, en affichant le composant au-dessus des figures close, market_cap et volume.

Exercice interactif pratique

Essayez cet exercice en complétant ce code d’exemple.

# Create menu
menu = ____
callback = CustomJS(args=dict(plot_one=close, plot_two=market_cap, plot_three=volume, line_1=close_line, line_2=market_cap_line, line_3=volume_line), code="""
plot_one.visible = true
plot_two.visible = true
plot_three.visible = true
line_1.visible = true
line_2.visible = true
line_3.visible = true
if (this.value == "Close") {plot_two.visible = false
                            plot_three.visible = false
                            line_2.visible = false
                            line_3.visible = false}
    else {plot_one.visible = false
          line_1.visible = false} 
if (this.value == "Market Cap") {plot_one.visible = false
                                 plot_three.visible = false
                                 line_1.visible = false
                                 line_3.visible = false} 
    else {plot_two.visible = false
          line_2.visible = false}
if (this.value == "Volume") {plot_one.visible = false
                             plot_two.visible = false
                             line_1.visible = false
                             line_2.visible = false}
    else {plot_three.visible = false
          line_3.visible = false}
""")

# Set up the interaction
____

# Display the layout
output_file(filename="stock_metrics.html")
____
Modifier et exécuter le code