Sisense社のフロントエンドエンジニアである私は、データビジュアライゼーションのために複数のライブラリとコンポーネントを組み合わせて作業をする必要がありました。Web上にはビジュアライゼーションを作成するためのライブラリが非常にたくさんありますが、それぞれに良い面、悪い面があります。ここからは、私が思うデータビジュアライゼーション向きのライブラリベスト５をご紹介します。

皆さんは「React」は知っていますか？あまり詳しくないという方に向けて簡単な説明をすると、「React」はユーザーインタフェースを構成するためのJavaScriptライブラリです。「React」はFacebook社により提供されており、ユーザーインタフェースを組み立てるためのJavaScriptライブラリの中では最も人気があります。

1. D3
GitHub stars: 79,937

「D3」はデータを基に画面要素を操作するJavaScriptライブラリです。このライブラリはWEBの標準規格に則っており、フレームワークに依存しないので、使用時に「React」や「Vue」、その他のどんなJavaScriptフレームワークを使っているかを気にする必要がありません。「D3」はどのフレームワーク上でも使用することが可能です。
例えば、私が3つのアプリを、それぞれ異なるライブラリ (React, Vue, Polymer)を使用して開発したとしても、「D3」はその３つの全てで問題なく動作します。

「D3」では、DOM要素を指定する際に、jQueryライク(私のような古参開発者向け)な指定方法が使用できます。なので、大抵は「SVG」仕様なだけでなく、「canvas」仕様でも動作します。「D3」を活用することで、DOM要素に対して、イベントや描画処理を適用することができます。

「D3」ではDOM要素を操作することが可能ですが、我々は「React」を使用します。「React」は仮想DOMのため、レンダリングに優れているからです。そのため、「D3」はデータ描画処理のためだけに使用します。

「D3」がすべてのビジュアライゼーションライブラリの生みの親と考えられているのは、「D３」が一番古いライブラリだからではなく、多くのライブラリが「D3」を基にして作られているからです。新たなライブラリが開発されている中で、「D3」というライブラリが存続し続けているのは、その新たなライブラリも「D3」を基に開発されていることが多々あるためです。

1. React-vis
GitHub stars: 4,612

「React-vis」とは、Uberによって開発された「React」のビジュアライゼーションライブラリです。「React-vis」を使用することで、簡単に折れ線グラフや、面積グラフ、棒グラフ、円グラフ、パイチャート、ツリーマップなどの一般的なチャートを作成することが出来ます。

なぜこのライブラリなのか？

「React-vis」ライブラリは、驚くほど簡単に使い始めることが出来ます。こちらには素晴らしいドキュメントが整備されており、かつUberによってサポートされています。実際、Uberはデータビジュアライゼーションライブラリをサポートしている企業としては、最大規模の企業です。

どこが優れているのか？

「React-vis」ライブラリは、優れたAPI群が用意されています。しかし、何か特定要素の追加や、拡張をしようとすると、少し難易度が高いです。(もちろん、サポートに問い合わせることができます)

3. Chart.js
GitHub stars: 40,141

「Chart.js」とは、ドキュメント以上に効果を発揮するライブラリです。
「Chart.js」は、非常に軽量のライブラリであり、棒チャートや、バブルチャート、ドーナツチャート、折れ線チャート、鶏頭図チャート、ラダーチャート、散布図チャートといった、レスポンシブなチャートが豊富に用意されています。

なぜこのライブラリなのか？

なによりも軽量さです！このライブラリはとてもコンパクトです！近頃のWEB業界では、軽量さは大きな関心事となっており、「Chart.js」をZIP化した際の容量は、11kb程度です。軽量なライブラリほど、貴重なものはありません。また「Chart.js」は、ネイティブAPIの活用もしており、学習に掛かる時間はほとんどありません。

どこが優れているのか？

「Chart.js」は、より多くのチャートやSVGオプションの追加を行うことでされに高機能になります。

4. VX
GitHub stars: 5,263

なぜこのライブラリなのか？

「VX」には、優れたAPIが用意されており、複雑なグラフを非常に簡単に開発できます。また「VX」は、非常に柔軟であるところに優位性をもっており、提供しているグラフの多様さには驚かされるでしょう。

5. Rechart
GitHub stars: 10,229

「Rechart」とは、Reactのコンポーネントを組み合わせてチャートを構成するビジュアライゼーション用ライブラリです。非常に豊富なサンプルと、優れたドキュメントが整備されています。

なぜこのライブラリなのか？

「Rechart」は、コンポーネントを組み立てて開発する、非常に小さなライブラリです。
新たなコンポーネントを組み合わせて、様々なチャートを作成することが可能です。

まとめ

上記の全てのライブラリについて言えることは、どれも優れたライブラリであり、それぞれの違いは大きくないということです。強いて異なる点を挙げるなら、ライブラリのサイズや、異なる種類のAPI群、そしてGitHubでの人気などでしょう。しかし、オープンソースのコミュニティにおいて、ライブラリの人気は日々更新されており、優れた機能の追加が次々と行われています。

これらを活用する際には、自分自身がコミットするオープンソースを見つけ、オープンソースのコミュニティに属することを勧めます。もしくは独自にコミュニティを作るのもよいでしょう！「D3」は非常にパワフルで、あなた独自のJSライブラリを「D3」を基にして作成することができます。しかし理想なのは、「D3」に計算処理をさせて、どちらのJSフレームワークを使用してもレンダリングを実行させることです。この方法により、非常にインタラクティブなグラフを開発することが可能になります。

 

この投稿に記載されているすべてのデータは情報提供のみを目的としており、正確ではありません。前もってご了承ください。
本記事は、Sisense社の許諾のもと弊社独自で記事化しました。
https://www.sisense.com/blog/the-five-best-data-visualization-libraries-out-now/

※ Sisense は、Sisense Inc の商標または登録商標です。
※ その他の会社名、製品名は各社の登録商標または商標です。
※ 記事の内容は記事公開時点での情報です。閲覧頂いた時点では異なる可能性がございます。