Select で折れ線グラフを切り替える

最後のタスクとして、ヘッジファンドから Electronic Arts の株価パフォーマンスを分析できる可視化の作成を依頼されています。

そこで、Select ウィジェットを使って、次の指標を切り替えられるようにするのが最適だと判断しました：close、market_cap、volume。

stocks データセットは EA に絞り込み済みです。各指標に対して 3 つのフィギュア（close、market_cap、volume）と、それぞれのグリフ（close_line、market_cap_line、volume）が作成され、あらかじめ読み込まれています。

この演習はコースの一部です

Bokehで学ぶインタラクティブ・データビジュアライゼーション

コースを見る

演習の手順

Select() を呼び出して menu を作成します。options 引数には（この順で）"Close"、"Market Cap"、"Volume" のリストを渡し、value を "Close" に設定し、タイトルは "Metric" にします。
適切な menu のメソッドを呼び出し、ウィジェットの "value" を callback に連携させます。
show の中で layout を呼び出し、ウィジェットをフィギュア close、market_cap、volume の上に表示します。

実践的なインタラクティブ演習

このサンプルコードを完成させて、この演習に挑戦してみましょう。

# 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")
____

コードを編集して実行