Bokehで作成したインタラクティブなグラフを，Jekyllに埋め込みたくなった．Embedding Bokeh Plots with Github Pages - Paige McKenzieを参考にしたら，簡単にできた．日本語もちゃんと表示されている．

Bokeh Plot

環境

  • macOS Sierra, 10.12.6
  • Ruby 2.5.1p57
  • Jekyll 3.7.3
  • Python 3.6.5
  • Bokeh 0.12.15

手順

Embedding Bokeh Plots with Github Pages - Paige McKenzieを参考にすれば良い．

htmlファイルの生成

以下を実行して，2018-07-12-flowers.htmlを生成する．

ポイントはoutput_file()で出力すること．この直後にshow(p)するとグラフを確認できる．

htmlファイルの配置

上記で生成した2018-07-12-flowers.htmlを，_includes以下の任意の場所に保存する．本ウェブサイトでは，_includes/bokeh/ディレクトリ配下に保存した．ただし，2018-07-12-flowers.html冒頭の<!DOCTYPE html>を削除しないと，そのまま表示されてしまうので注意．

Markdownからの呼び出し

以下を記載すれば，任意の場所にグラフを配置できる．

Bokeh Plot

感想

思ったよりずっと簡単にできた．これで，Projectsページのグラフをいい感じにできる．

将来的には，週間少年ジャンプの掲載順を定期的に文化庁メディア情報データベースから取得して，インタラクティブにグラフ表示するようにしたい．無料で実現するためには，Herokuとか使えばいいのかしら．