Node.jsで手軽にグラフ表示できるライブラリのnodeplotlibが便利だったので使ってみました。

はじめに

Node.jsでデータを扱う作業をしている際にグラフ表示したい時ありませんか？
データ扱いたいならpythonでやれというのはあるんですが、Node.jsでベースを作ってるんでNode.jsでやりたいんですよ。。。

ということで、良いライブラリがないか探してみるとnodeplotlibというライブラリを見つけまして、デモのGIF画像がなかなか良さげだったので使ってみました。

nodeplotlibとは？

README によると

Library to create top-notch plots directly within NodeJS on top of plotly.js without any front-end preparations. Inspired by matplotlib.

ということで、グラフ描画ライブラリのPlotly.jsをフロントエンドのコードなしで使えるようにしたライブラリとのことです。
Plotly.jsは使ったことはなかったんですが、可視化のライブラリとしては有名なんですね。実際見た目も機能面もよくて使いやすかったです。
Python、R、Javascript、MATLAB、Juliaなど様々対応しているみたいで色々な記事が見つかりました。

Plotly.jsをJavascriptで使う場合はフロントエンド側で実装する必要があるんですが、nodeplotlibを使うと、フロントエンドの用意なしでNode.jsから直接グラフを描画してくれるようです。

使ってみた

お試しで書いたコードはgithubに上げたので、サクッと試したい方はcloneしてもらえればすぐ使えるはずです

$ git clone https://github.com/dbgso/hello-nodeplotlib.git
$ cd hello-nodeplotlib
$ yarn
$ yarn ts-node src/index.ts

以降で中身を見ていきます

インストール

yarnかnpmで入ります

$ yarn add nodeplotlib
# or
$ npm install nodeplotlib

サンプルコード実行

Quick startにサンプルコードがあったので実行してみます。

src/index.ts

import { plot, stack, clear, Plot } from 'nodeplotlib';

const data: Plot[] = [{
  x: [ 1, 3, 4, 6, 7],
  y: [ 2, 4, 6, 8, 9],
  type: 'scatter'
}];

stack(data);
stack(data);
stack(data);
plot();

実行

$ yarn ts-node src/index.ts

できました。同じグラフが３つ表示されました。
公式GIFにもありますが、処理が完了するとデフォルトのブラウザが開いてグラフが表示されます。

ちょっとコードを見てみますがまあ簡単ですね。
x,yのグラフのデータを指定してtypeでグラフの形式を指定する。
指定できるデータ形式はTypescriptの型推論で教えてくれるので、非常に楽ちんです。(これがあるからNode.jsで書きたい)

描画にはstackとplotメソッドが使われています。
stackメソッドを複数コールすることで複数グラフを並べることができるみたいですね。サンプルでは同じデータを渡していますが、全く違うデータ形式でも可能です。(折れ線グラフ、円グラフ、棒グラフなど)

ちなみにstackなしで、plotにデータを直接渡してもグラフ描画可能です。
その場合は３回呼ぶとタブが３つに別れます。

- stack(data);
- stack(data);
- stack(data);
- plot();
+ plot(data);
+ plot(data);
+ plot(data);

データ量にもよりますが、複数のグラフをplotで描画するとNode.js・ブラウザ共に重くなってしまうので、２つ別々に並べて見比べたいということがなければstackで縦に並べることをおすすめします。(最初plotだけでやったら８コア全てを使い切ってCPU100%でフル回転してました)

その他にもサンプルがありますが、ここから先はPlotly.jsの使い方の話になってくるのでやめておきます。
Plotly.jsのまとめ記事を見てもらったほうが良いと思います。

動作の仕組み

なんとなく予想はつきますが、フロントのコードなしでどうやってるのかな？というのが気になりましたが、仕組みはREADMEのBehind the scenesに下記のように記載されていました。

The lib launches a webserver and opens new tabs for every plot located at http://localhost:8080/plots/:id. At this address a temporary html template file, the nodeplotlib script and plotly.min.js are available. The client side js requests the plot data at http://localhost:8080/data/:id. After all pending plots are opened in a unique tab and all the data is requested, the server shuts down. If you fire another plot the server starts again provides your plot and shuts down automatically.

グラフ描画中だけ一時的なWebサーバを建てておいて、Plotly.jsでの描画完了時に落としているようです。
画面描画のためのコードはライブラリ側で持ってくれているのでお手軽に使えるわけですね。
フロントのコードの中身は https://github.com/ngfelixl/nodeplotlib/tree/master/src/www にありました。

ちなみにブラウザをリロードすると404ページになってしまうので注意してください。リロード時点ではサーバが落ちているので

おわりに

非常にお手軽にグラフ表示ができてよかったです。
個人的に結構ありがたいライブラリだったのでどんどん活用していきたいです。