こんにちは。エンジニアのつっちーです。
みなさんは、Webサイト上でチャート（グラフ）の描画が必要なとき、どのようなライブラリを利用されているでしょうか。Chart.jsやGoogle Chartsをはじめ、試しきれないほどたくさんの選択肢があり、毎度まよってしまいます。
そんな中から、100,000件、1,000,000件といった大量のデータ表示に適したものを選定する機会がありましたので、今回はその結果をまとめてみようと思います。
1,000,000件の散布図を表示できたライブラリ
データ数1,000,000件の散布図表示に耐え、最終候補として残ったライブラリは以下の3点でした。
- Plotly
- D3FC
- Apache ECharts
Apache ECharts
出典：https://echarts.apache.org/
Apache ECharts
GitHub
散布図（1,000,000件）
実現できるチャートの種類が圧倒的に多く、GitHubのスター数も47.3kと群を抜いています。サンプルも豊富で、ドキュメントは詳細です。中国のBaidu社から提供されています。
Plotly
出典：https://plotly.com/javascript/
Plotly JavaScript Graphing Library
GitHub
散布図（1,000,000件）
Apache EChartsに次いで多機能なライブラリです。他のライブラリと違う点として、チャート上にフリーハンドで線や図形を描く機能も持っています。カナダのPlotly社から提供されています。
D3FC
D3FC
GitHub
散布図（サンプルの数値を書き換えることで1,000,000件の表示が可能です）
D3.jsと連携して使えることが特徴です。すでにD3を使用しているプロジェクトでは良い選択肢となるかもしれません。イギリスのScott Logic社から提供されています。
選定のポイント
SVGよりCanvas
Apache ECharts、Plotly、D3RC、このすべてに共通しているのが、HTMLのCanvasによってチャートを描画している点です。Canvasを使用していないライブラリでは、SVGによる描画がほとんどですが、CanvasかSVGか、ここが大量に表示できるかどうかの最初の境界でした。
Canvasがグラフ全体を1〜数個のDOMノードに描くのに対して、SVGは1つの図形を1〜数個のDOMノードで描きます。そのため、SVGではCanvasに比べて、一度に描けるDOMノード数の限界に到達するのがかなり早いです。場合によりますが、5,000件の散布図でブラウザが応答不能となることもありました。
2DよりWebGL
Canvasで描画するライブラリを利用するだけでも表示件数は改善されますが、1,000,000件の表示にはそれだけでは対応できませんでした。Canvasにいくつかあるモードのうち、2Dモードを使用しているか、WebGLモードを使用しているか、これが2つ目の境界でした。
2Dの場合はCPUによって処理が行われますが、WebGLの場合はGPUが利用されます。描画処理に適したGPUに頼ることで、表示可能な件数は一気に跳ね上がります。また、Apache EChartsのように、2Dを使用していながらも、描画方法の工夫によってWebGLに近い結果を出しているライブラリもあるようです。
まとめ
大抵のケースでは、どのライブラリを選んでも問題なく動作するはずですが、もしこのように大量のデータ表示が必要な場合は、これらのライブラリが助けになってくれるかもしれません。ぜひ実際に触って試してみてくださいね。
ではまた！ つっちーでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
