DendrogramViewer
1.0.0
樹状図ビューアのWebアプリケーション
樹状図ビューアーは、JavaScriptで書かれたオープンソースのインタラクティブなWebアプリケーションで、階層的クラスタリング（HC）アルゴリズムによって生成されるクラスターの配置を示すために使用されるツリー図である樹状図の視覚化を可能にします。 D3.JSは、樹状図の視覚化の基礎として使用されます。
このアプリケーションにより、さまざまな数のクラスターと異なる相違 /距離のインタラクティブな視覚化が可能になります。また、樹状図のカラーパレット選択、垂直レイアウト、表示クラスターラベルの表示など、いくつかの視覚オプションもあります。
樹状図ビューアーは、MITライセンスの下でオープンソースであり、商業用に無料です。
目次
D3.JS樹状図レイアウトは、この記事の指示に基づいています。
さらに、次のJavaScriptパッケージがアプリケーションで使用されています。
git cloneから、Webブラウザーでindex.htmlファイルを開くことができます（より良い結果を得るにはFirefoxの使用が推奨されます）。
JSONファイル形式は、大規模なクラスタリングファイルをよりコンパクトにするために、D3.JSによってツリーに使用される標準形式の変更されたバージョンです。各クラスターは、次のノードオブジェクトで表されます。
nはクラスターの名前またはIDを保持します。dは、HCアルゴリズムによって見つかって作成された非類似性/距離です。cは、クラスターが作成された親 /子供のペアを含むリストです。たとえば、次のJSONは、aglomera.netフレームワークを使用して[Kaufman＆Rousseeuw、1990]のデータセットをクラスター化することによって生成されました。
{
"n" : " (1;4;5;2;3;6;7) " , "d" : 5.5 ,
"c" : [
{ "n" : " (2;3;6;7) " , "d" : 2.05 ,
"c" : [
{
"n" : " (2;3;6) " , "d" : 1.9 ,
"c" : [
{
"n" : " (2;3) " , "d" : 1.12 ,
"c" : [
{ "n" : " (3) " , "d" : 0.0 , "c" : [] },
{ "n" : " (2) " , "d" : 0.0 , "c" : [] } ] },
{ "n" : " (6) " , "d" : 0.0 , "c" : [] } ] },
{ "n" : " (7) " , "d" : 0.0 , "c" : [] } ]
},
{ "n" : " (1;4;5) " , "d" : 1.5 ,
"c" : [
{ "n" : " (1;4) " , "d" : 0.71 ,
"c" : [
{ "n" : " (4) " , "d" : 0.0 , "c" : [] },
{ "n" : " (1) " , "d" : 0.0 , "c" : [] } ] },
{ "n" : " (5) " , "d" : 0.0 , "c" : [] } ]
} ]
}アプリケーションは、 examplesフォルダーからデフォルトのJSONファイルを自動的にロードします。手動ファイルの選択は、2つの方法で実現できます。
fileパラメーターを使用することにより、例file:///index.html?file=examples/iris.json;Load...ボタンをクリックして、目的のファイルを選択します。 
Zoom & drag:チェックボックスを切り替えることにより、樹図要素のズーム（マウススクロール）とドラッグ（マウスクリックとドラッグ）をサポートします。Num. clustersスライダーでは、対応するサイズのクラスターセットの視覚化が可能になります。特定のクラスター内のインスタンスは、同じノードとリンク色を持つことで視覚化されます。 1の値を選択すると、すべてのインスタンス、つまりすべて同じ色のすべてのインスタンスが含まれる単一のクラスターが表示されます。Dist. thresholdスライダーは、アルゴリズムが対応する類似性 /距離で見つかったクラスターセットの視覚化を可能にします。 0の値を選択すると、各インスタンスが独自のクラスター、つまり、すべて異なる色で表示されます。樹状図をSVG（Scalable Vector Graphics）ファイルにエクスポート /ダウンロードするには、 Download SVGボタンをクリックします。注：これにより、基本的な要素スタイリングなどの画像ファイルがエクスポートされます。たとえば、色や重み。完全なフォーマットの場合、 styles.css同じフォルダーに配置します（おそらくスタイルファイルをカスタマイズします）。
Show labelsチェックボックスを切り替えることにより、各クラスターのラベル（通常はその中に含まれるインスタンス）の表示をサポートします。
Vertical layoutチェックボックスを切り替えることにより、垂直および水平樹状図の両方のレイアウトをサポートします。
Straight linksチェックボックスを切り替えることにより、ストレートツリーブランチリンクと丸いツリーブランチリンクの両方をサポートします。
Grayscaleチェックボックスを切り替えることにより、グレースケールの色をサポートします。
Tol 、 Color Brewerなどを含むColor schemeコンボボックスから選択することにより、さまざまなカラーパレット間の選択を樹状図のクラスター色に使用できます。注：一部のパレットは、色の数に制限があります。したがって、クラスターの限られた数を選択する必要があります。
背景Background color色を選択することもできます。
参照
その他のリンク
Copyright©2018、Pedro Sequeira
