お手軽に使えるデータ分析環境の一つ、Google Cloud Datalab がなかなかいい感じなんだけど、可視化しようとした時に選択肢が Google Charts か matplotlib しかない。
Google Charts は今風な Look & Feel とインタラクティブなところがイイのだが、描けるグラフの種類は限られてる。
matplotlib は複雑なグラフもかけるけど、インタラクティブなグラフは描けない。また実装もちょっと面倒。
ピュア JavaScript でインタラクティブでいろんなグラフが描ける（Google Charts 以外の）ライブラリがないか探したところ、Highchartsがイイ感じだったので、Google Cloud Datalab 上で Highcharts にチャレンジしてみた。
大まかな手順
Datalab 環境を整えた上で、新規作成した notebook 上で主に次の実装を行う。
1. IPython.display の HTML を import
2. HTML を通じて実行する html 及び JavaScript のソースを書く。
3. 2.のコードの中で、Highcharts のソース（highcharts.js）を 動的に読み込む。
4. notebook のコードを実行する。
ミソは3.のhighcharts.js を動的に読み込むところ。
1.IPython.display の HTML を import
そもそも Google Cloud Datalab は IPython notebook を Google のクラウド上で動かしているもの。ならば、IPython notebook で html を出力するための IPython.display とか使えるはず・・・とか思って試したらあっさり使えた。
from IPython.display import HTML
html = """
<div id="hello">hello world!</div>
"""
--><div id="hello">hello world!</div>の実行結果が表示される。
この機能を利用して、次のステップに示すように、チャートを表示する div と、highcharts のグラフ描画を行うコードを書いて、HTMLの引数に渡して実行する。
2.HTML を通じて実行する html 及び JavaScript のソースを書く
Highcharts のドキュメントに沿って、以下のような JavaScript を HTMLメソッドの引数となるように、notebook に記述する。
詳しくはこちら↓の gist 参照。
3.2.のコードの中で、Highcharts のソース（highcharts.js）を 動的に読み込む
こちらの Highcharts のドキュメントを見ればわかるのだが、通常の Web であれば highcharts.js は普通に script タグで読み込めばいい。だけど上のソースではワザワザ
javascript var hcScript = $('<script>').attr({src: 'https://code.highcharts.com/highcharts.js'}); $('head').append(hcScript);
としている。
これは、highcharts.jsをロードした時に生成されるHighcharts オブジェクトが、二重に生成されるのを避けるため。
普通の Web なら、
ページをロードするたびに 初期化 --> highcharts.js がロードされる --> Highcharts オブジェクトが生成される
となるところだが、Datalab では notebook を実行してもページ全体がロードされるわけではないので、Highcharts オブジェクトは残っていることになる。
このため、普通に script タグで書くと、
Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16
ってエラーが発生する。これは Highcharts オブジェクトが重複して生成されてるよー という意味らしい。
なので、Highcharts オブジェクトの有無に基づいて、highcharts.js をロードするスクリプトタグを append してみた。のが上のコード。
・・・というような紆余曲折を経てやっとできた your first chart がこちら↓
注意点
ただし、Highcharts は商用で利用するにはライセンス契約が必要っぽいので要注意。