わたねこコーリング

野良プログラマ発、日々のアウトプット

D3.js でローソク足チャート描くなら TechanJS がイイ!(かもしんない)

最近、データ分析の真似事をしたくなって、どうせやるなら実益も目指せる株取引を対象に、とごにょごにょ始めたりしています。そこで必要になるのが、データの「見える化」。ローソク足チャートをベースに、諸処の分析結果を作画して「ほほー」等と言ってみたい訳ですが、まずはツール選びに一苦労。jqPlot の様に高レベルに実装されたプロダクトは使うのも簡単なのですが、そのぶんちょっとしたカスタマイズにも苦労するようです。

他の手段を調べてみると、データ分析のビジュアライズには D3.js がイイという話。けど、D3.js ってのは「グラフを簡単に描けるライブラリ」というよりはデータ分析の視覚化フレームワーク的な、非常に広範囲な利用を想定した「低レベル」な実装なんですね。なので、グラフひとつ描くにもそれなりの学習が要るみたい…「努力すんのは嫌いだしめんどっちーし楽して身につく方法はないもんかな」と調べていたら、TechanJS という D3.js ベースの財務グラフ作画ライブラリを見つけました。

開発元提供のサンプルを見て頂ければ分かるように、ローソク足チャートは序の口で、MACD・RSI・トレンド線・一目均衡表など、テクニカル分析を齧ると出てくる様々な手法の作図が用意されているようです。しかも、このライブラリは作図だけでなくデータ分析の機能も併せ持っているらしい! とっても凄そうなのですが、先ずはシンプルにローソク足チャートに移動平均線を重ね描きするという初歩の初歩にチャレンジしてみました。で、出来た図がこんな感じ(↓)。

f:id:mariyudu:20150830212210p:plain

直近100日の日経平均日足と、5日・25日・75日の移動平均線です。TechanJS はドキュメントが殆ど無いので、サンプルのコードを参考に必要に応じて削ったり足したりしながらのプログラミングでした。作画には D3.js 流儀のステップが必要で関数一発という訳には行きませんが、データをポンと渡すだけで軸の目盛を実用的に調整してくれるところが有り難いです。プログラムは JSFiddle に上げておきましたよ、と(↓)。

jsfiddle.net

なにぶん、D3.js そのものに未だ不慣れなので自由自在に使えるようになるまでは長い道のりになりそうですが、一攫千金をニンジンにがんばってみようかと。