テック株のパフォーマンス推移

ヘッジファンドは、ここ数年のテック株のトレンドを分析したいと考えています。Apple、IBM、Netflix の株価を表示する折れ線プロットを作成してほしいとのことです。

さらに、閲覧期間を調整できるように DateRangeSlider も追加して、関心のある期間を見つけやすくします。

図（figure）はすでに作成され、折れ線グリフが追加されています。加えて、stocks["date"] 列の最古と最新の日付として、earliest_date と lowest_date が事前に読み込まれています。

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

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

コースを見る

演習の手順

DateRangeSlider をインポートします。
DateRangeSlider() を呼び出し、title に "Date"、start と end にそれぞれ earliest_date と latest_date を指定し、value を "2014, 6, 2", "2018, 2, 7" に設定し、ウィジェット操作ごとの増分を 1 日（step=1）にします。
.js_link() を 2 回呼び出し、ウィジェットの "value" を fig の x_range の "Start" および "End" にリンクし、それぞれの呼び出しで属性セレクタを順に 0 と 1 に設定します。
layout() を呼び出して、fig の上に slider を表示します。

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

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

# Import widget
____
earliest_date = stocks["date"].min()
latest_date = stocks["date"].max()
fig.line(apple["date"], apple["close"], color="green", legend_label="Apple")
fig.line(netflix["date"], netflix["close"], color="red", legend_label="Netflix")
fig.line(ibm["date"], ibm["close"], color="purple", legend_label="IBM")
fig.legend.location = "top_left"

# Create DateRangeSlider
slider = DateRangeSlider(title="____", start=____, end=____, 
                         value=("____", "____"), step=____)

# Link DateRangeSlider values to figure
slider.____("____", ____.____, "____", attr_selector=____)
slider.____("____", ____.____, "____", attr_selector=____)

# Create layout and display plot
output_file(filename="stock_price_over_time.html")
show(____(____, ____))

コードを編集して実行