Google Cloud Datalab でリッチな Data Visualization を！ - Highcharts を Datalab 上で使う

お手軽に使えるデータ分析環境の一つ、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 のコードを実行する。

datalove.hatenadiary.jp

ミソは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 がこちら↓