DendrogramViewer下載DendrogramViewer源代碼下載

DendrogramViewer

網站數據

1.0.0

下載

樹狀圖查看器

樹狀圖查看器網絡應用程序

樹狀圖查看器是用JavaScript編寫的開源交互式Web應用程序，允許可視化樹狀圖，這是用來說明由層次群集（HC）算法產生的簇排列的樹圖。 D3.js用作樹狀圖可視化的基礎。

該應用程序允許對不同數量的簇和不同的差異 /距離進行交互式可視化。它還具有多種視覺選項，例如樹狀圖調色板選擇，垂直佈局，查看群集標籤等。

樹狀圖查看器是MIT許可證的開源，可免費提供商業用途。

源存儲庫：https：//github.com/pedrodbs/dendrogramviewer

依賴性
用法
參見

依賴性

D3.JS樹狀圖佈局基於本文中的說明：

如何使用D3庫製作樹狀圖

此外，應用程序中使用以下JavaScript軟件包：

D3.js（v3），用於樹狀圖佈局可視化
jscolor彩色選擇器（v2.0.5），用於背景顏色選擇
調色板生成器，用於樹突圖調色板選擇
SVG Crowbar（V2，修改為不導出樣式，因此減小文件大小），用於樹狀圖導出到SVG圖像文件

用法

您可以git clone樹狀圖查看器源代碼，然後在Web瀏覽器中打開index.html文件（建議使用firefox使用firefox以獲得更好的結果）。

JSON樹狀圖文件定義

JSON文件格式是D3.js使用的標準格式的修改版本，以使大型聚類文件更加緊湊。每個群集由一個節點對象表示：

屬性n保存集群的名稱或ID；
屬性d是由HC算法找到和創建的差異/距離；
屬性c是包含創建集群的父母 /子女的列表。

例如，通過使用aglomera.net框架將數據集聚集在[Kaufman＆Rousseeuw，1990年]中，從而產生以下JSON：

{
  "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文件。手動文件選擇可以通過兩種方式實現：

通過在URL中使用file參數，例如file:///index.html?file=examples/iris.json;
通過單擊Load...按鈕並選擇所需的文件。

樹狀圖查看器UI

相互作用

通過切換Zoom & drag: Check-Box來支持樹狀圖元素的縮放（鼠標滾動）和拖動（鼠標單擊和拖動）。
更改Num. clusters滑塊將允許可視化相應大小的群集集。通過具有相同的節點和鏈接顏色來可視化特定集群中的實例。選擇1值將顯示一個包含所有實例的單個群集，即具有相同的顏色。
更改Dist. threshold滑塊將允許算法在相應的差異 /距離處發現的群集集的可視化。選擇一個值為0的值將以自己的群集為IE顯示每個實例，所有實例都具有不同的顏色。