Python Bokehで２つのグラフを並べて比較する

はじめに

Python Bokehでマラソンのデータを可視化の続きです。
前回は今までのマラソンのリザルトと、つくばマラソンの詳細リザルトを可視化しました。
今回は横浜マラソンとつくばマラソンの詳細を並べて比較してみます。

可視化

以下のコードを実行するとHTMLでグラフが表示されます。

from bokeh.io import show
from bokeh.plotting import figure
from bokeh.models import DatetimeTickFormatter
from bokeh.layouts import gridplot
from datetime import datetime as dt
import math
xlist = []
for i in range(1, 44):
    xlist.append(i)

# データのリスト
tsukuba_list=['4:49', '5:02', '4:59', '4:44', '4:58', '4:55', '4:59', '4:50', '4:53', '4:49',
              '4:51', '4:49', '4:49', '4:44', '4:59', '4:48', '4:44', '4:52', '4:47', '4:48',
              '4:48', '4:45', '4:43', '4:50', '4:42', '4:43', '4:48', '4:44', '5:10', '4:43',
              '4:38', '5:01', '5:12', '4:50', '4:56', '4:54', '4:57', '5:00', '4:42', '4:44',
              '4:50', '4:56', '5:00']

yokohama_list=['6:25', '6:38', '6:05', '5:59', '5:48', '6:00', '6:16', '5:10', '5:11', '5:43',
               '5:34', '5:46', '5:49', '5:53', '5:39', '5:28', '5:39', '5:25', '5:08', '5:57',
               '5:06', '5:43', '6:04', '5:53', '5:13', '5:14', '5:16', '5:01', '4:53', '4:46',
               '5:01', '5:55', '4:51', '5:27', '5:17', '5:46', '5:16', '5:27', '5:07', '5:27',
               '4:48', '5:14', '5:08']


# listをdatetime型に変換
xlist = [d for d in xlist]
yokohama_list = [dt.strptime(d, '%M:%S') for d in yokohama_list]
tsukuba_list = [dt.strptime(d, '%M:%S') for d in tsukuba_list]

# Y軸の設定
y_format = "%M:%S"

# Plot Toolの設定
TOOLTIPS = [
        ("distance", "$x")
    ]

# 　左側に表示するデータをプロット
left = figure(
            title="横浜マラソンリザルト 2018/10/28",
            y_axis_type='datetime',
            y_range=(dt.strptime('4:00','%M:%S'),
                    dt.strptime('7:00','%M:%S')),
            x_axis_label='距離(km)',
            y_axis_label='タイム(分)',
            tooltips=TOOLTIPS
            )
left.line(xlist, yokohama_list, legend="ペース", line_width=2)
left.xaxis.major_label_orientation = math.radians(90)
left.yaxis.formatter = DatetimeTickFormatter(
    seconds=[y_format],
    minutes=[y_format]
    )

# 右側に表示するデータをプロット
right = figure(
            title="つくばマラソンリザルト 2018/11/25",
            x_range=left.x_range,
            y_range=left.y_range,
            x_axis_label='距離(km)',
            y_axis_label='タイム(分)',
            tooltips=TOOLTIPS
            )
right.line(xlist, tsukuba_list, legend="ペース", line_width=2)
right.xaxis.major_label_orientation = math.radians(90)
right.yaxis.formatter = DatetimeTickFormatter(
    seconds=[y_format],
    minutes=[y_format]
    )

# 表示
p = gridplot([[left, right]])
show(p)

並べてみると、横浜マラソンのペースのばらつきがひどいです。横浜マラソンではスタート位置が後方だったこともあり、なかなか自分のペースで走れませんでした。遅れを取り戻そうとして後半ペースが上がっていますが、かなりばらついています。

以下のように２つのグラフの連動した操作が可能です。
ポップアップはプロットツールを使用し、X軸の値を表示しています。

おわりに

横浜マラソンもつくばマラソンも最終的な疲労度は同じくらいだったと思います。
可視化して比較することで、一定のペースで走ることの大切さを改めて認識できました。
今年のフルマラソンもサブ3.5できるように頑張ります

参考文献

https://www.sambaiz.net/article/129/
https://bokeh.pydata.org/en/latest/docs/user_guide/tools.html
https://qiita.com/yuji38kwmt/items/4edf1d87568a860fc3b8