python bokehメモ


##bokehを使ってみる
参考元：
bokehチュートリアル
https://bokeh.pydata.org/en/latest/
plot toolのチュートリアル
https://bokeh.pydata.org/en/latest/docs/user_guide/tools.html
udemy:
https://www.udemy.com/the-python-mega-course/learn/v4/content



```py
from bokeh.plotting import figure
from bokeh.io import output_file, show

#x軸、y軸に使う同じ長さのリストを用意
x=[1,2,3,4,5]
y=[6,7,8,9,10]

#出力されるhtmlの名前
output_file("Line.html")

#figure class instance
f = figure()

#create line
f.line(x,y)

f.triangle([6,9],[7.5,10])
f.circle([5,7],[6,8])

show(f)
```
1. [1,6],[2,7],[3,8]...の座標を通る一直線が描写されたグラフが開く。
2. 座標上を点じゃなくて、三角形や丸にすることも可能

```py

import pandas
from bokeh.plotting import figure
from bokeh.io import output

df=pandas.read_csv("data.csv")

#x軸、y軸
x = df["x"]
y = df["y"]

output_file("Line_from_csv.html")
f=figure()
f.line(x,y)
show(f)
```

1. pandasのdateframeのcolumnデータもグラフに描画できる
2. x:1,2,3,4,5 y:6,7,8,9,10のデータ


##グラフの装飾

```py

import pandas
from bokeh.plotting import figure, output_file, show

#plot:(グラフなどを)描く
#width→グラフの横サイズ。height縦サイズ。toolsはグラフの右上に表示される機能。指定しないと線部
p = figure(plot_width=500, plot_height=400, tools="pan", logo="grey")

p.title.text="Cool data"
p.title.text_color="Gray"
p.title.text_font="times"
p.title.text_font_style="italic"

p.xaxis.minor_tick_line_color=None
p.yaxis.minor_tick_line_color=None

p.xaxis.axis_label="Date"
p.yaxis.axis_label="Intesity"


p.line([1,2,3],[4,5,6])
#alpha:透明度transparency
p.circle([1,2,3,4,5],[3,4,5,6,7], size=[i*2 for i in [2,3,4,5,6]], color="red", alpha=0.1)

output_file("graph.html")
show(p)
```
1. plot_widthはグラフの横の長さ。plot_heightは縦の長さ。toolsは指定しないと全部のtoolがグラフに表示(今回は実験的に指定)。
2. p.title.textはグラフの左上にグラフの名前をつけられる。他にインスタンス変数はいろいろある
3. 座標上に`cricle`で円を描写するときに、円のサイズや色、透明度を変更できる。
4. `output_file`は指定しないと、"graph.html"になる
5. `show`でhtmlを開いてくれる


大気圧と温度のxlsxグラフ

```py
import pandas
from bokeh.plotting import figure, output_file, show

#大気圧と温度のxlsxグラフ
df=pandas.read_excel("http://pythonhow.com/data/verlegenhuken.xlsx")
x=[x/10 for x in df["Temperature"]]
y=[y/10 for y in df["Pressure"]]

f = figure()
f.title.text="Tempraturea and Air Pressure"
f.title.text_color="Gray"
f.title.text_font="times"
f.title.text_font_style="italic"
f.xaxis.minor_tick_line_color="Red"
f.yaxis.minor_tick_line_color="Green"
f.xaxis.axis_label = "Temperature(℃)"
f.yaxis.axis_label = "Pressure(hPa)"

#output_file()を指定しないと、graph.htmlって名前になる
f.circle(x,y, size=0.5, alpha=0.5)
show(f)
```

##bokehで昨日のmotion_detecotrできたcsvをhtmlで表示する

```py
from motion_detector import df
from datetime import datetime as dt
from bokeh.plotting import figure, output_file, show
from bokeh.models import HoverTool, ColumnDataSource

#新しいcolumnを追加。datetimeをstringへ
df["Start_string"]=df["Start"].dt.strftime("%Y-%m-%d %H:%M:%s")
df["End_string"]=df["End"].dt.strftime("%Y-%m-%d %H:%M:%s")

p = figure(x_axis_type="datetime", height=100, width=500, sizing_mode='scale_width', title="Motion Graph")
#y軸上の小さな目盛 horizontal grid line
p.yaxis.minor_tick_line_color=None
#小さな目盛からでる横線を削除
p.ygrid[0].ticker.desired_num_ticks=1

#column data source
cds = ColumnDataSource(df)

hover=HoverTool()
hover.tooltips=[("Start","@Start_string"),("End","@End_string")]
p.add_tools(hover)

#quardrant, left→四角の左線、right→四角の右線
#left,rightもindex数が同じである必要がある。
q = p.quad(left="Start", right="End", bottom=0,top=1,color="green", source=cds)
output_file("Graph.html")

show(p)
```

1. motion_detector.pyは昨日の記事のやつ。importすると対象の.pyファイルが実行される。その中のglobal変数dfを拾ってくる。dfはpandasのdataframeオブジェクト。Seriesとかそんなやつ。中身は`datetime.now()`で取得したもの。モーションが検知された開始時間と終了時間が"Start"と"End"にそれぞれ入ってる。
2. dfに新しいカラムを追加する。`datetime`オブジェクトを`strftime`で文字列へ。時間を別の形式にフォーマットできる。グラフに表示用
3. グラフのベースを`figure`で作成。
4. `ColumnDataSource()`はdfやdict型を保存して、columnやkeyを変数名として扱えるようにするっぽい。"column_name"で中の値を使えるようになる。なんかグローバル変数っぽく使えるっぽい
5. `Hovertool`オブジェクトはグラフ上にマウスオーバーしたときに情報を表示できる。
6. `tooltips`は具体的な表示するための情報。bokeh特有の書き方で、`("Start","@Start_string")`こう書くと、グラフにマウスを重ねたときに、文字列"Start"と、上記4で`ColumnDataSource`オブジェクトにしたデータの`Start_string`columnの値を表示できる。ここのtooltips参照:https://bokeh.pydata.org/en/latest/docs/user_guide/tools.html
7. グラフに`add_tools`でhoverオブジェクトを重ねる
8. `quad`は四角形を形成する。leftとright部分の文字列は`source=cds`のcdsのcolumn。cdsは`ColumnDataSource`オブジェクト。bottom=0,top=1でグラフ上の四角形の縦範囲を指定。ColumnDataSourceの詳細は：https://bokeh.pydata.org/en/latest/docs/user_guide/tools.html

##あとがき
bokeh公式チュートリアルにきれいなグラフまみれ。コードも読める。