JavaScriptのグラフ視覚化ライブラリ



Graph Visualization Library Javascript



解決:

私はあなたが探しているかもしれないものをまとめました:http://www.graphdracula.net

これは、有向グラフレイアウト、SVGを備えたJavaScriptであり、ノードをドラッグすることもできます。まだ微調整が必​​要ですが、完全に使用可能です。次のようなJavaScriptコードを使用して、ノードとエッジを簡単に作成できます。



var g = new Graph(); g.addEdge( 'イチゴ'、 'チェリー'); g.addEdge( 'cherry'、 'apple'); g.addEdge( 'id34'、 'cherry');

前述のRaphaelJSライブラリ(グラフフルの例)に加えて、ネット上で見つけた力ベースのグラフレイアウトアルゴリズム(すべてのオープンソース、MITライセンス)のコードを使用しました。ご意見や特定の機能が必要な場合は、実装する場合がありますので、お問い合わせください。


他のプロジェクトもご覧になることをお勧めします。以下は2つのメタ比較です。



  • SocialCompareにはライブラリの広範なリストがあり、「ノード/エッジグラフ」の線はグラフの視覚化のものをフィルタリングします。

  • DataVisualization.chは、ノード/グラフライブラリを含む多くのライブラリを評価しました。残念ながら、直接リンクがないため、「グラフ」をフィルタリングする必要があります。

これは同様のプロジェクトのリストです(いくつかはすでにここで言及されています):



純粋なJavaScriptライブラリ

  • vis.jsは、多くの種類のネットワーク/エッジグラフに加えて、タイムラインと2D / 3Dチャートをサポートしています。自動レイアウト、自動クラスタリング、弾力性のある物理エンジン、モバイルフレンドリー、キーボードナビゲーション、階層レイアウト、アニメーションなど。MITは、自己組織化ネットワークの研究を専門とするオランダの会社によってライセンス供与および開発されました。

  • Cytoscape.js-jQueryの規則に従って、モバイルをサポートするインタラクティブなグラフ分析と視覚化。 NIHの助成金を介して資金提供され、@ maxkfranz(以下の彼の回答を参照)がいくつかの大学や他の組織の支援を受けて開発しました。

  • JavaScript InfoVis Toolkit-Jit、インタラクティブな多目的グラフ描画およびレイアウトフレームワーク。たとえば、双曲ツリーを参照してください。 TwitterdatavizアーキテクトのNicolasGarcia Belmonteによって構築され、2010年にSenchaによって購入されました。

  • D3.js Protovisの後継である強力な多目的JS視覚化ライブラリ。力指向グラフの例、およびギャラリー内の他のグラフの例を参照してください。

  • PlotlyのJS視覚化ライブラリは、JS、Python、R、およびMATLABバインディングでD3.jsを使用します。 IPythonのnexworkxの例はこちら、ヒューマンインタラクションの例はこちら、JS EmbedAPIをご覧ください。

  • sigma.jsグラフを描画するための軽量で強力なライブラリ

  • インタラクティブな接続グラフを作成するためのjsPlumbjQueryプラグイン

  • Springy-力指向のグラフレイアウトアルゴリズム

  • JohnResigによるProcessingライブラリのProcessing.jsJavascriptポート

  • JS GraphIt-直線で接続された「n」ドロップボックスをドラッグします。ラインの最小限の自動レイアウト。

  • RaphaelJSのGraffle-汎用の多目的ベクター描画ライブラリのインタラクティブなグラフの例。 RaphaelJSはノードを自動的にレイアウトできません。そのために別のライブラリが必要になります。

  • JointJS Core-DavidDurmanのMPLライセンスのオープンソースダイアグラムライブラリ。静的な図、または完全にインタラクティブな図作成ツールとアプリケーションビルダーのいずれかを作成するために使用できます。 SVGをサポートするブラウザで動作します。コアパッケージに含まれていないレイアウトアルゴリズム

  • mxGraph以前は商用のHTML5ダイアグラムライブラリでしたが、Apachev2.0で利用できるようになりました。 mxGraphは、draw.ioで使用される基本ライブラリです。

商業図書館

  • GoJSインタラクティブグラフ描画およびレイアウトライブラリ

  • HTML商用グラフ描画およびレイアウトライブラリ用のyFiles

  • KeyLines商用JSネットワーク視覚化ツールキット

  • ZoomCharts商用多目的視覚化ライブラリ

  • SyncfusionJavaScriptダイアグラム描画と視覚化のための商用ダイアグラムライブラリ。

放棄された図書館

  • Cytoscape Web埋め込み型JSネットワークビューア(新機能は計画されていません。Cytoscape.jsに引き継がれています)

  • Canviz JS レンダラー Graphvizグラフの場合。 2013年9月に放棄されました。

  • arbor.js優れた物理学と目を見張るような洗練されたグラフ。 2012年5月に放棄されました。いくつかの半保守フォークが存在します。

  • jssvggraph'SVGオブジェクトを使用するJavascriptライブラリとして実装された最も単純な力指向グラフレイアウトアルゴリズム '。 2012年に放棄されました。

  • jsdotクライアント側のグラフ描画アプリケーション。 2011年に放棄されました。

  • Protovis Graphical Toolkit for Visualization(JavaScript)。 d3に置き換えられました。

  • 接続と関係のためのMooWheel Interactive JS表現(2008)

  • JSViz2007時代のグラフ視覚化スクリプト

  • JavaScriptのdagreグラフレイアウト

非Javascriptライブラリ

  • Graphviz洗練されたグラフ視覚化言語

    • Graphvizは、Emscriptenを使用してJavascriptにコンパイルされており、オンラインのインタラクティブデモがここにあります。
  • フレア美しく強力なFlashベースのグラフ描画

  • NodeBoxPythonグラフの視覚化


免責事項:私はCytoscape.jsの開発者です

Cytoscape.jsは、HTML5グラフ視覚化ライブラリです。 APIは洗練されており、次のようなjQueryの規則に従います。

  • クエリとフィルタリング用のセレクター(cy.elements( 'node [weight> = 50] .someClass')は、期待どおりに機能します)、
  • 連鎖(例:cy.nodes()。unselect()。trigger( 'mycustomevent'))、
  • イベントにバインドするためのjQueryのような関数、
  • コレクションとしての要素(jQueryにはHTMLDomElementsのコレクションがあるように)、
  • 拡張性(カスタムレイアウト、UI、コアおよびコレクション機能などを追加できます)、
  • もっと。

グラフを使用して本格的なWebアプリを構築することを検討している場合は、少なくともCytoscape.jsを検討する必要があります。それは無料でオープンソースです:

http://js.cytoscape.org


JsVISは非常に優れていましたが、グラフが大きくなると遅くなり、2007年から廃止されました。

prefuseは、Javaでリッチなインタラクティブデータの視覚化を作成するためのソフトウェアツールのセットです。 flareは、Adobe Flash Playerで実行されるビジュアライゼーションを作成するためのActionScriptライブラリであり、2012年以降廃止されました。