縱覽全局垂直打擊的組織模式（上）
- 2020 年 1 月 8 日
- 筆記
有人說螞蟻的世界是二維的（非常不準確），那是因為它們永遠不知道何為高矮深淺。 因為它們感官的「無能」，致使它們喪失感受世間萬物的機會。
對知識系統（eg.部落格）而言，良好的組織結構是極為重要的，尤其是當內容增多，關聯複雜後顯得尤為重要。傳統的「分類(Categories)+標籤(Tags)」的二級模式雖足以應付大部分用戶的需求，但本質上其還是需要用戶對已有分類和標籤有良好的組織，這對很多用戶來說是根本做不到，因為我們往往缺的就是這種「縱覽全局」的能力。
分類往往越分越多，標籤也是隨意放置，久而久之，不僅已有的分類和標籤雜亂無章，更為甚者是新增內容時根本不知從何下手，往往需要遍歷過往的標籤和分類，才能做出最終定奪。現在，通過圖布局的方式，可以以一種近乎完美的方式對複雜的內容進行組織，詳細效果請查看 該頁面。
縱覽全局
對於知識系統（之後均以部落格代指）而言，傳統的模式只是簡單的分支，或者稱其為樹形結構，在探索過程中，用戶就如同「螞蟻」一樣，只得選擇先從哪進入，然後再進入到哪裡。對於單篇內容而言並無影響，但當需要感知全局時，往往這種模式就會出現問題。
分級/樹形組織方式的不足
- 用戶開始便直接希望查閱某些內容，且不確定分類時，無法定位（局部要求） 可以通過搜索功能完成該需求。
- 新增分類和標籤時，缺少對已有項的感知能力（全局要求） 尤其對於標籤，會更加的隨意和雜亂，會出現重複、同義等等問題，在每次打標籤時都要頭疼一番。
- 對於所打的標記，沒有評價方法，永遠不知道分類和標籤是否匹配（全局要求） 對於已存在的標籤或分類，這樣打標籤是否合理，由於標籤的「鬆散」特性，不同分類中可以出現同一標籤，這樣在傳統分級模式下，分類和標籤的契合程度如何，系統的維護者無從知曉。
天然的解決方案：圖布局
分級/樹形標記模式本身就是一個分類過程，自己的知識內容（部落格文章）是對象，維護者將其放置在不同的類別下。標籤(Tags)則更像是分類過程中的副產物，更貼近文章內容，但又言簡意賅，通過分級的思考方式，分類和標籤和文章的關係是：
分類-標籤-文章（1:M:N）
對於上述關係，分別用A、B、C表示的話，則整個系統其實就是一個「Ai-Bi-Ci」的三元組集合。該集合的好壞（即品質）就是其在語義上的契合程度，例如：
分類:軍事 -> 標籤:爆炸 -> 文章:伊拉克遭遇恐怖襲擊 分類:娛樂 -> 標籤:爆炸 -> 文章:阿富汗遭遇恐怖襲擊
當抽象為網路/圖之後，軍事類別和娛樂類別會通過「爆炸」這一標籤相連，如是，明顯的會發現「爆炸」位置不對。（雖然例子很蠢，但當語義區分模糊、標籤數量繁多時，極易出現該情況）。下面直接拿已完成的布局來解釋：
粉紅色為分類、藍色為標籤、節點半徑為被使用的次數
- 語義不符的連接點（異常的跨類標籤），如果連接點對某一方語義不匹配，那麼很可能該文章是特殊的，或者該標籤不應該出現在該文章。（下圖裡可視化的文章在這兒，屬於特殊文章，正常「生活分類」和「可視化」的語義並不匹配）
- 合格的連接點（跨分類的標籤）：雖然標籤出現在不同分類中是非常正常的，例如「總結」，可以出現在任何分類中。但類似「總結」這類標籤往往數量很多，即多次的出現在不同的類別中，那我們就說這是一個合格的跨分類標籤。
- 對於分類點，以本部落格為例，由於是對已存在數據進行分析，所以如果某分類下屬節點不足，那麼高度懷疑該分類不合理，除非是需要日後擴充的分類。這一需求在圖布局的視圖下非常容易分辨出來，合格的類別應該有眾多葉節點，當葉節點不足，則應考慮將其降級至標籤。（例如下圖中的「樸素貝葉斯」，可將其降級為標籤，並歸類到「研究方向」中）
值得注意的一點是： 這裡使用的圖布局使用力導向(Force-directed)布局演算法，相關則相近，無關則疏遠，又完美的給布局結果以語義上的解釋，即：
- 當兩個類別及其葉子節點距離很遠時，其兩者基本無關
- 當兩個類簇距離很近時，其高度相關
反推設計
上節中的分析看似很有道理，布局結果的使用也非常方便，那麼如何從無到有將其構建出來？主要有以下幾個方面：
- 天然的三元組集合：文章的特性（篇幅長）決定了其不能參與整個構建和評價過程，那麼剩下的二元組是天然的「關係數據」，對於關係數據的可視化，圖布局演算法/模式首當其衝。
- 分析需要呈現的維度：對於任意節點（布局時類別和標籤並無分別）來說，主要有以下維度資訊：
- 自己（如果是類別）包含哪些標籤；
- 自己是什麼類型的節點（類別？標籤？）；
- 自己被使用了幾次；
- 對應的可視化要素： a. 圖中節點的鄰節點（點、線） b. 類別為粉色標籤為藍色（顏色） c. 次數與節點的半徑成比例（圓面積）
- 還可以附著資訊（擴展維度）的要素：
- 節點的形狀（三角形、圓、方）
- 連線的顏色（紅、藍）
- 連線的線型（虛線、實線）
上述過程中，確定「圖布局」模式是基礎，剩下的無非是將資訊綁定到可視化元素上，例如，已實現的布局將「類別/標籤」用顏色區分，其實用形狀等其他可視化元素區分也完全可以。
垂直打擊
到此為止，只是上層結構，類似資料庫存儲，搞了半天只是在搞索引，並沒有觸碰到數據，所以目前為止該網路並沒有直通最底層（文章內容）的能力，這個問題恰好被Hexo的文件結構所解決，Hexo給每個標籤和每個分類都渲染了單獨的頁面，關聯的文章被放置在頁面中，在此，直接通過節點的文本資訊構造訪問地址，將其綁定到文本上，即可點擊後跳轉到相關頁面，雖然不是直接跳轉文章，但也可以說具備相當的垂直打擊能力了。
進階版本：變的更強
簡單粗暴的加入之前三元組被拋棄掉的文章資訊，但由於加入後過於散亂，所以有必要將文章資訊固定，以便於視覺呈現。如下圖（d3.js實現的、用於可視化編程概念的可視化模型）：
上圖就是簡單的帶固定節點的力導向布局，但其實現程式碼比較複雜，目前處在構造數據階段。一般的可視化模型套用的步驟：
閱讀原站程式碼 -> 從原站抽離可視化部分 -> 搞清調用數據的方法及格式 -> 構造同樣的數據 -> 獨立運行 -> 放回自己的站點內
問題迎刃而解
到此，對於分級/樹形分類的三點不足，可以發現很輕鬆就可以解決。既有全局視角，又可以同時具備直達的能力，對於組織內容數量較高（超過50）的站點非常適合該模式的導航、或輔助探索。
扯犢子完畢，下一篇（分為上下兩篇）將詳細說明一下如何遵循上節中的套用步驟、藉助Hexo的輔助函數（Helper）來一步步實現的該可視化功能的。
