JavaScript でのグラフの視覚化

Web サイトのスクリプト言語である JavaScript は、クロスプラットフォームで、軽量で、コンパイルされ、解釈されるプログラミング言語です。 Web ページの開発は、その最もよく知られた用途の 1つですが、ブラウザー以外の環境でも広く使用されています。

この記事では、JavaScript が基本的にグラフ ビジュアライゼーションでどのように使用されるかについて説明します。 大量のデータを処理する場合、グラフを使用してデータを視覚化する必要があります。

グラフの視覚化

データの視覚化は、データをグラフィカルな表現に変換し、一目で明確な概要を示します。 また、視覚的な表現を通じてデータの傾向とパターンを特定することもできます。

グラフ ビジュアライゼーションはネットワーク ビジュアライゼーションとも呼ばれ、グラフ データに基づくデータ ビジュアライゼーションのサブカテゴリであり、単純に円グラフ、棒グラフ、ヒート マップなどのチャートでデータを表します。 グラフとチャートという用語は、同じ意味で使用されるのが一般的です。

企業は、特に大規模で複雑なデータを扱う場合に、データからより深い洞察を得て、より適切な意思決定を行うために、グラフを広く使用しています。

JavaScript ライブラリの重要性

JavaScript はユニバーサル ブラウザーをサポートしているため、インタラクティブな Web アプリケーションの構築に役立ちます。 JavaScript グラフ ライブラリを使用して、グラフの視覚化をこれらのアプリケーションに統合できます。

グラフ視覚化ライブラリは、グラフ構造を処理するコードの作成にかかる時間を短縮するために作成されました。 提供されたライブラリを使用して、データの視覚化、チャートとグラフの作成、UI へのアニメーションの追加、3D および 2D の画像とオブジェクトの作成を行うことができます。

オープンソースから商用まで、幅広いグラフィック表示ソリューションが利用可能です。 データを視覚化する場合、それらの中から適切な方法を選択する必要があります。

適切な JavaScript データ視覚化ライブラリを選択する

適切なライブラリを選択するときは、ライブラリを使用する理由とタイミングをよりよく理解する必要があります。 プロジェクトのライブラリを選択する際には、以下の要因を考慮する必要があります。

1. 一部のライブラリは少数のタイプをサポートしているため、最初に作成するグラフ (円グラフ、地図、折れ線グラフ、または棒グラフ) を決定する必要があります。
2. データ セットが大きすぎて複雑な場合。
3. ライブラリは Web とモバイルの両方にどのように対応していますか?
4. ライブラリのブラウザ サポート。
5. ライブラリが JavaScript フレームワークに適合しているかどうか。
6. 使用中または使用を希望するカスタマイズ
7. 有料ソリューションやオープンソース ライブラリを使用するのはなぜですか?

グラフ ビジュアライゼーション ライブラリで対応できる状況

すべてのコンポーネント (ツールチップ、凡例、X/Y 軸など) を備えた基本的で魅力的なチャートがプロジェクトにある場合、またはアプリケーションが応答性が高く、標準化された精巧なチャートを必要とする場合、特にある場合 が複数種類ある場合は、ライブラリを利用するとよいでしょう。

ライブラリを使用すると、同じことを繰り返さないようにすることで、コードの複雑さを軽減できます。 また、ライブラリにはアニメーションが組み込まれており、それらも適用できます。

要件が小さい場合は、オープンソース ライブラリを使用できます。 JavaScript でグラフを視覚化する際に使用できるライブラリを見てみましょう。

ライブラリは、商用、汎用、または特殊なオープンソース ライブラリに分類できます。

商用 JavaScript ライブラリ

最も広範な機能とコストは、商用ライブラリに関連付けられています。 また、それらはカスタマイズ可能で包括的であり、優れたカスタマー サポートを提供します。

したがって、これらのライブラリは大企業のプロジェクトに適しています。 商用ライブラリの一部を以下に示します。

オグマ

Ogma は、Linkurious によって開発された、最も使用されている商用仮想化ソフトウェアの 1つです。 レイアウト アルゴリズム、注釈レイヤー、ジオモード、スタイリング オプション、視覚的なグループ化など、大規模なインタラクティブなグラフの視覚化を開発するための多数の機能が含まれています。

すべての機能には、例とテンプレートが付属しています。 また、Ogma システムは柔軟で、さまざまな統合フレームワークをサポートしています。

Ogma は WebGL レンダリングを利用していますが、タイム バーは含まれていません。

キーライン

Keylines は、ケンブリッジ インテリジェンスの商用製品であり、複雑に接続されたデータを分析して視覚化するためのアプリケーションを構築するための JavaScript ソフトウェア開発キット (SDK) です。 Keylines は、キャンバスと WebGL のレンダリングをサポートしています。

他のグラフ視覚化エンジンと比較すると、Keylines は React フレームワークの統合をサポートする最も強力なライブラリです。 いくつかのグラフ アルゴリズムのサポートに加えて、タイム バーなどの便利なレイアウトや要素が含まれています。

yファイル

この商用ソフトウェア ライブラリにより、ユーザーは任意のダイアグラム ネットワークまたはグラフを視覚化できます。 YWorksが開発。

他のアプリケーションとの統合を容易にするために、Angular および React フレームワークと yFiles を使用できます。 また、幅広いデスクトップ、Web テクノロジ、およびレイアウト アルゴリズムをサポートしながら、多数の機能と拡張オプションを備えています。

GoJS

GoJs は、インタラクティブなグラフや図を作成できる JavaScript/TypeScript ライブラリです。 組み込みのレイアウトと拡張可能なツールがいくつかあり、React、Angular、Vue.js などのさまざまなフレームワークで動作します。

Canvas と SVG は、GoJS の唯一のレンダリング オプションです。

汎用 JavaScript ライブラリ

これらのライブラリでさえ無料で提供されており、商用の JavaScript ライブラリほど強力ではありません。 また、これらのライブラリをユースケースに適応させるには、かなりの時間を費やす必要があります。

最もよく使われている汎用 JavaScript ライブラリを以下に示します。

D3

D3 (データ ドリブン ドキュメント ライブラリ) は、チャートやグラフでデータを視覚化するときに最もよく使用されるライブラリです。 棒グラフ、折れ線グラフ、ネットワーク プロット、地理空間など。

また、D3 は、react-vis-force および react-d3-graph ラッパー ライブラリを使用して、データに基づいてドキュメントを操作する本格的なデータ視覚化フレームワークです。

D3 グラフ ライブラリには、再現可能で編集可能なソース コードを含むさまざまなチャートとグラフが含まれています。 最初に、任意のデータを DOM にバインドする必要があります。 そのデータに基づいて、ライブラリ内のさまざまなメソッドと関数を使用してチャートとグラフを作成できます。

このライブラリにはメソッドが組み込まれていないため、チャートやバーを作成するメソッドを直接呼び出すことはできません。 代わりに、独自に関数を実装する必要があります。

しかし、提供されているヘルパー関数を使用すると、関数の実装は簡単です。

Vega.js

インタラクティブな視覚化デザインは、宣言型視覚化文法である Vega を使用して作成、保存、および共有できます。 ワシントン大学インタラクティブ データ ラボは、BSD-3 ライセンスの下でライセンス供与された Vega.js を開発しました。

D3 や Tensorboard などのデータ視覚化ツールには、このフレームワークが組み込まれています。 JavaScript を使用する代わりに、JSON で仕様を記述します。

Vis.js

この JavaScript ベースの視覚化ライブラリは、Apache 2.0 ライセンスの下でリリースされています。 このオープンソースのキャンバス ライブラリを使用すると、大量の動的データを操作および操作できます。

Vis ライブラリの使用は単純なグラフの視覚化に適していますが、既に提供されているものを拡張して構築することは困難です。 クラスタリング、グラフ操作、イベントとレイアウトの処理など、いくつかの奇妙な機能もサポートされています。

さらに、Vis.js は MIT ライセンスに基づいてライセンスされており、ノードのスタイル設定、ラベル付け、アニメーション、限定されたレイアウトなどの一般的なカスタマイズ オプションをサポートしています。

G6

G6 と Graphin は兄弟ライブラリであり、Ant Visualization チームによる優れた製品です。 どちらも MIT ライセンスに基づいてライセンスされています。MIT ライセンスは、グラフ視覚化モデリングまたは分析アプリケーションを開発するための一連の重要な機能とメカニズムを提供します。

G6 は Graphin を介して React と統合されます。 それとは別に、キャンバスに基づくグラフ視覚化フレームワークを提供します。

これらの統合により、G6 のライブラリは、さまざまなスタイリング関数やアルゴリズムなどの追加コンポーネントにアクセスできます。

どちらのライブラリも、小規模から中程度のグラフを視覚化し、アプリケーションを迅速に構築するのに役立つ機能とツールを備えています。 また、実装と API はややこしい場合があります。

専用のオープン ソース JavaScript ライブラリ

ユーザーは、汎用ライブラリと同様に、オープンソース ライブラリを無料で使用できます。 ただし、一部のライブラリにはいくつかの制限があり、学習曲線が急になる場合があります。

以下は、オープンソースの JavaScript ライブラリの一部です。

シグマ.js

Sigma.js は、グラフの視覚化で長年使用されている人気のあるライブラリの 1つです。 Science の Media Lab は、MIT ライセンスの下でこのライブラリを維持および開発しました。

新しいバージョンでは、Sigma.js は、グラフォロジー ライブラリが管理するグラフ データ構造を分割します。 Sigma.js を React アプリケーションと統合することも可能です。

全体として、Sigma.js ライブラリは、数値データのグラフをプロットすることに専念しています。 開発者は、データを効率的に使用して複数のグラフィック形式をエクスポートできます。

また、Sigma.js のレンダリング エンジンは、サーバー側とクライアント側の両方で正常に動作するのに役立ちます。

VivaGraphJS

VivaGraphJSを使えば、他のライブラリに依存することなく、様々な描画エンジンやレイアウトアルゴリズムでグラフを描画できます。 ノードと接続エッジの数に基づいて、レンダリング グラフの構造が異なります。

ライブラリには多くのカスタマイズ オプションがあり、拡張可能です。 最小限の労力で、ノードとリンクの外観をカスタマイズし、アルゴリズムのレイアウトを制御し、グラフを表示する媒体を選択できます。

Cytoscape.js

Cytoscape.js を使用すると、商用プロジェクトやオープンソース プロジェクトでリレーショナル データをグラフで視覚化できます。 このライブラリは、グラフ理論データの分析と視覚化に優れています。

これは、グラフ作成のニーズを処理し、インタラクティブなグラフを表示するためのオールインワン パッケージです。 さらに、この非営利ライブラリのライセンスには MIT ライセンスが使用されています。

このライブラリは非常に最適化されているだけでなく、ほとんどのブラウザーで十分にサポートされています。 さらに、デスクトップとモバイル デバイスにはジェスチャ サポートが組み込まれています。

開発者は、統合が設定されていないため、個別に統合を構築する必要があります。

グラフ理論アルゴリズムとともに集合論操作をサポートしています。 Google や Amazon などの巨大企業は、その品質のためにこれらのライブラリを使用しています。

リグラフ

ReGraph は高性能ですが未完成のライブラリです。 このライブラリを使用すると、React ネットワーク グラフを WebGL で視覚化し、D3 と Three.js を使用して構築できます。

まとめ

全体として、グラフの視覚化により、データが大きすぎたり複雑になったりしても、データの関係を簡単に理解できます。 上記のグラフ ライブラリとは別に、グラフでデータを視覚化するために使用できるものは他にもあります。

ユーザーのニーズに応じて、有料または無料のライブラリを選択して、エンド ユーザーが情報を解釈できるようにすることができます。