浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】Plotly で拡縮回転移動スクリーンショットが備え付きのグラフを作る

 Plotly はグラフを作るためのライブラリであり、Python でデータを可視化して web 上で公開するためのフレームワークである Dash の JavaScript 部分です。ディープラーニングをはじめとして様々なデータ解析が盛んであり、その解析結果を目で確認するためのライブラリも多くあり Plotly はその一つです。
 Python を介して用いられることの多い Plotly ですが、web 上で公開するためのフレームワークのグラフ表示部分として扱われていることから予想が立つ通り、その実態は JavaScript です。Dash 自体には有料の部分があるのですが、Plotly に限れば MIT ライセンスで GitHub で公開されており、完全にオープンソースソフトウェアです。
plotly/plotly.js: Open-source JavaScript charting library behind Plotly and Dash
Plotly JavaScript Graphing Library | JavaScript | Plotly

 JavaScript の Plotly はネットワークグラフに対応していない(一応、散布図を駆使することで静的なネットワークグラフと同等のものを作れます)のが少々残念ですが数値が主役のグラフは大体あります。
 例えば次の様に作れます。

 これの特筆すべき点は複雑なグラフであったとしても操作によって都度、見たい部分のみを見れる様にする機能がデフォルトでついてくる点にあります。これのおかげですし詰めになったグラフでも遠慮なくお出しできます。例は単純な二次元散布図でしたが他にも三次元グラフや地図も作れます。
3D Scatter Plots | JavaScript | Plotly
Bubble Maps | JavaScript | Plotly
 JavaScript で管理されているだけあって通常の DOM 同様に Event も用意されており、独自の拡張を容易に追加できます。このあたり工夫すると Plotly が主でないアプリケーションのグラフ機能に Plotly を採用して様々な他機能とつなげるといったことも十分可能です。

  • この記事いいね! (0)