Python Bokeh¶
Webブラウザ上にインタラクティブな操作が可能なグラフを表示するPythonのライブラリです。
グラフの描画・操作を行うJavaScriptコードを含むHTMLを生成し、ブラウザ上に表示します。HTMLが生成されるのでHTMLファイルを渡すことでPython実行環境がないPC上でもグラフの表示操作が可能になります。
はじめに¶
公式サイト: https://bokeh.org
最初の一歩¶
sin関数の折れ線グラフ¶
sin関数を折れ線グラフにプロットします。
import numpy as np
from bokeh.plotting import figure, show
x = np.linspace(-np.pi, np.pi, 1_000_000)
y = np.sin(x)
p = figure(title="sin(x)")
p.line(x, y)
show(p)
Numpyライブラリの ndarray 配列に、X軸の値とY軸の値をそれぞれ格納します。
Bokehライブラリの figure()でFigureオブジェクトを生成し、line()メソッドを呼んでX軸の値、Y軸の値を渡します。
実行すると、htmlファイルを生成し、Webブラウザでそのファイルを開きます。
プロットするポイント数を数万〜数十万個としても、そこそこの速さで操作できました。
オフライン環境での実行¶
生成されたhtmlファイルには、bokehのJavaScriptライブラリファイルをインターネットから取得する記述が含まれます。
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.8.2.min.js"></script>
インターネット接続ができない環境で、このhtmlファイルを開いてグラフ表示をする場合、JavaScriptライブラリをhtmlファイルに埋め込み生成するようにします。output_file関数でファイル生成するときのmodeを"inline"と指定すると、JavaScriptライブラリファイルをhtmlに埋め込みます。
from bokeh.plotting import figure, output_file, show
output_file('trigonometric_inline.html', mode='inline')
一般的な設定¶
グラフのタイトル、各軸の名称¶
figure()関数のキーワード引数に、グラフのタイトル(title)、X軸の名称(x_axis_label)、Y軸の名称(y_axis_label)を指定します。
p = figure(title="sin(x)", x_axis_label='angle', y_axis_label='sin(x)')
グラフの凡例名¶
一つのプロット領域に複数のデータ列を描画するときに、凡例を記載します。プロット関数（line等）のキーワード引数に凡例名（legend_label)を指定します。
p.line(x, y, legend_label='sin(x)')
線種の設定¶
line()メソッドで線種を設定するときは、キーワード引数に 破線（line_dash）、色（line_color）、透明度（line_alpha）、線幅（line_width）、を指定します。
- line_dash
line_dash=[4, 4]実線の長さと線のない部分の長さを指定、[4, 1, 1, 1]で一点破線のような形状も指定可能line_dash='dashed'破線の指定、他には 'solid'（実線）、'dotted'（点線）、'dotdash'（一点破線）、'dashdot'
- line_color
line_color='pink'名前付きCSSカラーで指定line_color='#70C040'RGB値で指定
マーカーと線の表示¶
Matplotlibの 'o-' のように線とマーカーを表示したい場合、line()メソッドだけでは表現できないので、line()メソッドとscatter()メソッドの２つを使って重ね合わせて表現します。
p.scatter(x, sin_y, legend_label='sin(x)')
p.line(x, sin_y, legend_label='sin(x)')
legend_labelに同じ名前を指定することで、凡例のグラフ線種も線とマーカーが重ね合わせて表示されます。
マウスホバーでデータ値表示¶
グラフ上にマウスカーソルを持っていくとそのグラフの値をポップアップ表示するホバー機能を追加します。
簡単な例¶
p.line(x, y)
p.add_tool(HoverTool(tooltips=[("x", "$x"), ("y", "$y")], mode="vline"))
show(p)
表示例
 |
figureオブジェクトに add_toolメソッドでHoverToolオブジェクトを指定します。
HoverToolにはtooltips引数にホバー表示するコンテンツの定義を渡します。見出し文字列と$xか$yでX座標の値、Y座標の値を指定、複数項目のホバー表示はカンマで区切って見出しと$座標名の指定を列挙します。$座標名の部分はホバー表示の際はデータの値となります。
pandasのDataFrameを指定してプロットした場合や、ColumnDataSourceで列名とデータ列を束ねて指定しプロットした場合は、$座標 ではなく、@列名 でデータ値を指定することができます。なお、lineメソッド等にndarrayを指定した場合、列名は含まれていないのですがメソッド内部でColumnDataSourceが作られるので、そのデフォルトの列名x, yを@x, @yのように指定することもできます。
p.add_tool(HoverTool(tooltips=[("x", "@x"), ("y", "@y")], mode="vline"))
mode="vline"を指定すると、例えばライングラフの時にライン上にマウスを寄せなくてもグラフ上にマウスカーソルを置くとそのカーソル位置がら垂直方向の点の値を表示します。
列名指定において、計算式の記述はできないので表示の数値をあらかじめ計算してDataFrameにホバー表示用の列として渡すなどの代替案があります。
表示桁数などの指定¶
$x{0.00}小数点以下2桁- @$x{(0.0 a)} 数値の大きさに応じて、k, m, g のようにキロ、メガ、ギガの値で表示
ただし、特定の桁に固定することができないので、999,900 は 999.9 kと表示、1,000,000は 1.0 m と表示されます。
複数のデータ列を1つのグラフに表示¶
色を個々に指定¶
p.line(x, sin_y, legend_label='sin(x)') # デフォルトは'blue'
p.line(x, cos_y, legend_label='cos(x)', color='red')
複数のグラフを並べて表示¶
row¶
横にグラフを並べる場合、row関数でfigureを指定します。
from bokeh.layout import row
a_fig = figure(...)
b_fig = figure(...)
show(row(a_fig, b_fig))
column¶
縦にグラフを並べる場合、column関数でfigureを指定します。
from bokeh.layout import column
a_fig = figure(...)
b_fig = figure(...)
show(column(a_fig, b_fig))
gridplot¶
複数のグラフを行列に並べて表示します。
個々のグラフを figure で作成し、glafplot に、2次元リストでfigureを指定します。
| A | B |
| C | D |
のように並べる場合、
a_fig = figure(...)
b_fig = figure(...)
c_fig = figure(...)
d_fig = figure(...)
p = gridplot([[a_fig, b_fig], [c_fig, d_fig]])
上下に2つ並べる場合は、gridplot([[a_fig], [c_fig]]) のように記述します。
複数グラフのX軸表示を連動¶
あるグラフで拡大、縮小、パニング操作をした場合に並べて表示している他のグラフも同じ操作を適用することができます。
X軸の表示を連動する場合、連動するグラフのfigureオブジェクトのx_rangeプロパティを共有します。
a_fig = figure(...)
b_fig = figure(...)
b_fig.x_range = a_fig.x_range
show(column(a_fig, b_fig))