Bokehのインタラクティブプロットをwebサイトにシュッと埋め込む

##プロット結果のHTMLを生成してWebサイトに埋め込こみたい
Pythonでプロットしたグラフをwebに埋め込めるライブラリとして有名なものだとmpld3やPlotly、そしてBokehなどが挙げられるでしょうか。
例えばQiitaでも下記のような記事で、Bokehを使ったプロットをwebに埋め込むための方法が簡潔にまとめられています。

BokehのグラフをWebサイトにシュッと埋め込む

ただ、それがインタラクティブなプロットとなると少し面倒。
本稿では、妥協をしつつインタラクティブプロットをwebサイトにシュッと埋め込みたい人のために、数値計算の実行コードのみをJSに肩代わりさせることで非常にシンプルにプロット結果のHTMLを生成する方法を紹介します。
##インストール
condaもしくはpipでインストールできます。

$conda install bokeh

$pip install bokeh

こだわりがなければCondaが良いみたいです。

##サンプルコード
以下、Sin波のサンプルコードです。実行すると共にslider.htmlが生成されてブラウザが自動で立ち上がります。

slider.py

# Python 3.6.4
# Bokeh 0.12.13

from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource, Slider
from bokeh.plotting import Figure, output_file, show

output_file("slider.html")

t = [t*0.001 for t in range(0, 1000)]
v = t

source = ColumnDataSource(data=dict(t=t, v=v))

plot = Figure(plot_width=400, plot_height=200,x_range=[0,1],y_range=[-100,100])
plot.line(x='t',y='v', source=source, line_width=3, line_alpha=0.6)

freq = Slider(start=1, end=100, value=50, step=1, title="freqency")
amp = Slider(start=1, end=100, value=50, step=1, title="amplitude")

callback = CustomJS(args=dict(source=source,freq=freq,amp=amp), code="""
    var data = source.data;
    var f = freq.value
    var a = amp.value
    t = data['t']
    v = data['v']
    for (i = 0; i < t.length; i++) {
    v[i] = a*Math.sin(f*t[i])
    }
    source.change.emit();
    """)

layout = column(plot,freq,amp)
freq.js_on_change('value', callback)
amp.js_on_change('value', callback)

show(layout)

##実行

$python slider.py

##埋め込んでみる
CodePenで埋め込んでみました。

See the Pen NMMYag by Krieg Reisfeld (@Krieg_Reisfeld) on CodePen.