Aan de slagGa gratis aan de slag

Lijngrafieken wijzigen met Select

Voor je laatste taak vraagt het hedgefonds je om visualisaties te maken waarmee de prestaties van het aandeel Electronic Arts geanalyseerd kunnen worden.

Je besluit dat de widget Select ideaal is, zodat ze kunnen schakelen tussen de volgende statistieken: close, market_cap en volume.

De stocks-gegevensset is gefilterd op EA. Drie figuren (close, market_cap en volume) en bijbehorende glyphs (close_line, market_cap_line, volume) zijn per metriek voor je aangemaakt en vooraf geladen.

Deze oefening maakt deel uit van de cursus

Interactieve datavisualisatie met Bokeh

Cursus bekijken

Oefeninstructies

  • Maak menu door Select() aan te roepen, geef een lijst door aan het argument options met "Close", "Market Cap" en "Volume" (in die volgorde), stel value in op "Close", en geef de titel "Metric".
  • Roep een geschikte methode van menu aan om de "value" van de widget te koppelen aan callback.
  • Roep layout aan binnen show, waarbij je de widget boven de figuren close, market_cap en volume toont.

Praktische interactieve oefening

Probeer deze oefening eens door deze voorbeeldcode in te vullen.

# 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")
____
Code bewerken en uitvoeren