旅行分析

このヘッジファンドは空へと狙いを定め、航空関連銘柄のパフォーマンスを理解したいと考えています。

Delta Air Lines、Southwest Airlines、Boeing を切り替えて表示できる、株価と日付の折れ線グラフを作成します。図とグリフはあらかじめ用意されています。

boeing = stocks.loc[stocks["name"] == "BA"]
delta = stocks.loc[stocks["name"] == "DAL"]
southwest = stocks.loc[stocks["name"] == "LUV"]
fig = figure(x_axis_label="Date", y_axis_label="Stock Price", 
             x_axis_type="datetime")
boeing_line = fig.line(x=boeing["date"], y=boeing["close"],
                       alpha=0.5)
delta_line = fig.line(x=delta["date"], y=delta["close"], 
                      color="red", alpha=0.5)
sw_line = fig.line(x=southwest["date"], y=southwest["close"], 
                   color="green", alpha=0.5)

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

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

コースを見る

演習の手順

CustomJS と一緒に Select ウィジェットをインポートします。
Select ウィジェットを作成し、options に "Boeing"、"Delta"、"Southwest"（この順）を含むリスト、value に "Boeing"、title に "Airline" を指定します。
"value" が変更されたときに callback 関数を実行するように、ウィジェットを設定します。

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

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

# Import modules
____

# Create Select widget
menu = ____(____=["____", "____", "____"], ____="____", ____="____") 

callback = CustomJS(args=dict(line_1=boeing_line, line_2=delta_line,
                             line_3=sw_line), code="""
line_1.visible = true
line_2.visible = true
line_3.visible = true
if (this.value == "Boeing") {line_2.visible = false
							 line_3.visible = false} 
    else {line_1.visible = false}
if (this.value == "Delta") {line_1.visible = false
							line_3.visible = false} 
    else {line_2.visible = false}
if (this.value == "Southwest") {line_1.visible = false
								line_2.visible = false} 
    else {line_3.visible = false}
""")

# Set up interaction
menu.____("____", ____)
output_file(filename="airline_stocks.html")
show(column(menu, fig))

コードを編集して実行