旅遊分析

這家避險基金正志在高飛，想要了解航空類股的表現。

你將繪製股價與日期的折線圖，並讓觀眾能在 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))

編輯並執行程式碼