大數據

聊聊Graphin的圖分析

2020-04-20

今年有幸跟參與到Antv Graphin的共建組織中，並與山果同學一起做了Graphin FY21財年的產品規劃。這篇文章主要根據Graphin規劃內容重新思考圖分析。

定位

既然聊到了圖可視化分析，首先要講清楚什麼是圖，什麼是圖分析。

圖

image.png

能讀到這篇文章的同學相信之前都會對圖有所瞭解。最早關於圖論的探討來自於歐拉大神解決的柯尼斯堡七橋問題, 這也開創了數學一個新分支-圖論和幾何拓撲學。下方引文中列出了維基百科中關於圖的定義，即圖是點邊的集合:

A graph (sometimes called undirected graph for distinguishing from a directed graph, or simple graph for distinguishing from a multigraph) is a pair G = (V, E), where V is a set whose elements are called vertices (singular: vertex), and E is a set of two-sets (sets with two distinct elements) of vertices, whose elements are called edges (sometimes links or lines).

   
在實際圖存儲與圖計算工程領域中，為了讓圖中攜帶更多信息，增加了一個屬性維度。圖中節點和邊都可以通過屬性攜帶更多信息。

圖分析

image.png

圖分析(即Graph Analysis), 簡單講是利用圖去分析問題。比如上圖的七橋問題就是通過圖的拓撲結構去分析問題、可能大家還聽過另外一個圖分析的經典問題六度分隔理論，即世界上任何互不相識的兩人，最多通過六個中間人就能夠建立起聯繫。在數據分析領域，圖分析是圖存儲、圖計算、圖可視化三者結合的產物, 圖分析依賴圖存儲進行大規模圖數據存儲，依賴圖計算的算法以及定製化的算法完成圖問題分析，依賴圖可視化完成圖分析的呈現以及交互， 完整分析過程可以分為預分析、分析、後分析三個過程：

  • 預分析：預分析過程主要包括數據獲取，數據清洗，數據建模(關聯), 數據導入，使數據具有的可分析性。這部分能力主要依託Graph引擎平臺或者數據開發平臺完成，本文不進行探討。
  • 分析：雖然圖分析屬於可視化的範疇，但是它與我們常見的可視化應用略有不同，它在講求信息的可讀性的同時，還會關注信息的分析性。一個優秀的圖分析產品需要根據業務場景提供一些列的分析能力幫助用戶在茫茫數據中完成問題的分析過程中，這些分析能力包含檢索，佈局，篩選，探查，定位等。
  • 後分析: 既然是一個問題分析，那大部分場景下還是需要一個分析結論，這裡的結論可能是圖片、PDF、Excel、甚至具有一定交互性的APP。

本文後續章節主要關注圖分析和圖可視化結合部分。

機遇

image.png

Gartner在2019年8月發佈的 《2019年新興技術成熟度》 中有兩項技術跟圖分析相關： Knowledge 和 Graph Analytics。在2020年的《十大數據分析技術趨》也將圖數據分析列入數據分析十大趨勢之一，並且預測到2022年之前圖計算和圖數據庫將以每年100%的速度增長，並且圖分析的商業化仍然處於早期階段，特別的國內起步尚晚，仍有很大的機遇。
image.png
圖分析特別是圖可視化玩法多樣：

  • 可以與圖數據庫，如Graph Compute, GeaBase, TigerGraph, Neo4j等結合, 賦予圖數據庫通用性數據分析能力，降低開發者的使用成本和理解成本。如Graph Compute的Graph Compute Analyser， TiggerGraph 以及Neo4j都有提供類似的功能；
  • 再結合圖計算的算法分析能力，能發展處通用知識圖譜平臺，I+關係網絡分析這樣的通用分析平臺；
  • 同時分析能力還能夠結合服務化，賦能更多需要圖分析技術的業務領域，比如金融風控領域，安全合規領域以及健康醫療領域等。

目前業界具備這樣能力的優秀框架並不多，並且大部分都已商業化，受制於這些商業公司策略（如Regraph不對國內銷售), 我們很難享受到這些優秀框架提供給我們的專業的分析能力；雖然社區已經有G6, CyptoScape, D3.js這樣優秀的引擎能夠滿足圖可視化分析需求，但是像關聯節點高亮，團伙導航，關係擴散，地理分析等業務領域相關的分析能力確實無法沉澱。我們期望能夠提供一個把專業的領域內的分析能力無門檻的提供給阿里巴巴集團和社區內的小夥伴的框架.

起源

業界在圖分析領域已經有很多年的沉澱，並且在安全領域、金融風控、關係分析、社交網絡等有很多成熟案例，這波浪潮裡不乏鼎鼎大名的Palantir, 劍橋情報的Regraph、Keylines, 以及Linkrous，但是這些成熟的分析產品都有一個通用問題-商用，很多業務場景下我們都很難直接複用。迴歸到阿里巴巴集團本身, 領域化的圖分析應用遍地開花:

  • 從底層技術角度來講，不同應用會做到最後都會產生一個圖分析沉澱（框架),  集團中”煙囪“林立。”煙囪"林立本事還是小事情，在圖分析領域會大量的專家經驗，這些經驗很難沉澱，也無法共享，更需要大量人力才能進行深入
  • 從產品角度講, 目前阿里集團還沒有哪一款產品能夠完全代表圖分析，量變的沉澱需要一定的機遇轉變為質的變化；並且分析產品中沉澱的一系列設計規範、交互規範、能力規範需要有一個平臺能夠進行跨應用共享
  • 從人才梯隊建設來講，前端領域深入可視化領域的專業同學本身就不多，做圖分析領域的專業同學更是少之又少，需要一個“組織”收攏這些圖分析領域的同學來應對業界逐漸爆發的圖可視化訴求。
    image.png

基於這樣三個訴求，我們從去年嘗試Graphin共建組織的建設。大體可以分為誕生，開源，共建三個階段：

  • 誕生階段: Graphin誕生於阿里巴巴集團內的一個圖分析產品，最開始基於Cytoscapte.JS構建，後來在Antv G6體系建設完成之後，切換到了G6引擎。這樣做當然不僅僅“政治正確性”問題，Graphin層保留了大量圖分析領域域的沉澱，有一些沉澱需要綁定底層引擎才能完成，比如Combos問題，Layout優化，顯然G6更加合適，於是就有了G6 + Graphin的兄弟組合。
  • 開源階段：Graphin誕生於業務，服務於業務，關注於業務，整個Graphin的演進圍繞著業務進行的。Graphin誕生之後深入參與阿里集團金融領域和知識圖譜領域的兩個標杆產品的建設，並在這兩個產品中沉澱了大量領域域的分析能力。隨著Graphin的不斷演進，我們意識到Graphin裡的沉澱可以服務更多具有相同需求的產品，於是我們在2019.11.22發佈了Graphin 1.0.0開源版本，這個版本里我們梳理了梳理了圖分析行業體系化的知識，內置了圖分析產品的最佳實踐，並且集成了圖分析業務工程化方案。
  • 共建階段：開源之後雖然我們仍然沉浸在業務中，繼續走業務打磨能力的路線，並沒有刻意宣傳。但在Antv品牌影響力的影響下，以及Graphin易上手，標準化，可定製的特點還是吸引了不少相同領域同學的關注。隨著與行業內同學持續交流，有越來越多的小夥伴參與到Graphin的討論與建設當中。

所以Graphin不僅僅是一個開源圖分析組件，更是一個圖分析領域的共建組織，有相同訴求的同學可以在這個組織內探索圖分析產品的實踐方案,  沉澱領域內的分析能力, 共享領域內的分析經驗。

進擊

業務架構

image.png

上文已經說過當前版本的Graphin與G6強綁的兄弟組合，G6引擎豐富圖算法，圖佈局，圖交互能力以及靈活的圖元素定製能力和深度優化的圖渲染能力為Graphin夯實了基礎; 同時Graphin的業務沉澱也會促進G6的技術創新。

FY21 Graphin主要關注還是關係可視分析領域，但是Graphin沉澱的能力不僅僅只能用於關係可視分析，其他領域如流量可視分析領域很多能力也是相同的，後續會與更多可視分析領域能力打通；在關係可視分析領域，我們基於已有的業界、阿里集團內的分析產品，沉澱了一些列的設計規範如元素規範，樣式規範，同時也提供了諸如自動佈局，基礎分析，高級分析，輔助分析，數據驅動，擴展機制等功能特性以滿足不同領域的可視化分析需求；在這之上，Graphin基於底層能力，為業務層各個領域提供了一系列漸進分析、時序分析、模式匹配、關係擴散、團伙導航、關鍵路等集成方案。

技術架構

image.png

Graphin除了承接了G6業務沉澱訴求之前，還有一個小目標平緩G6學習曲線，減少圖分析對於新同學的上手成本。所以技術架構上我們選取了React + 數據驅動的設計方式，基本能夠保障一行搞定圖展示，十行搞定圖分析Demo的目的。一個簡單的圖分析Demo如下代碼就能搞定。

const data = Utils.mock(10)
  .circle()
  .graphin();

const App = () => {
  return (
    <div>
      <Graphin data={data} layout={{ name: 'concentric' }}>
        <Toolbar />
        <ContextMenu
          render={() => {
            return <Card title="Card title">Card content</Card>;
          }}
        />
      </Graphin>
    </div>
  );
};

除了易用性之外，在業務開發中，Graphin還通過React的擴展機制、事件機制、API機制使開發者使用Graphin有等同於直接使用底層引擎G6一樣的靈活性。

設計規範

  • 點： 用戶關心的實體節點。在Graphin中，點通常由Label/Icon/Shape/徽標表示, 可通過修改節點配置信息賦予其不同的含義。同時點也是有狀態的：NormalHoverActivateRelatedHide以表達不同的交互含義。

image.png

  • 邊: 表示實體之間的關聯關係，在Graphin中線有單邊, 多邊，自環邊之分。每中類型的邊都有顏色/文本/箭頭/虛實。同時與點類似，邊也有NormalHoverActivateRelatedHide幾種狀態。

image.png![image.png]

  • 色板：與Antd類似，Graphin也提供色板的能力以保持產品內一致的視覺體驗。

image.png!

  • 主題：我們也要支持Dark /Light

image.png

這樣用戶可以通過下圖所示的配置面板(Graph Studio)，快捷調整節點/邊的各種配置，以滿足不同的業務需求。
image.png

交互規範

除了設計規範之外，Graphin同業務場景中抽象出很多通用的交互規範如:

  • 右鍵：節點/邊右鍵會呼出右鍵菜單，節點有可能還會存在環形菜單；Hover 點/邊會出現Tooltip；點擊節點/邊會出現屬性面板
  • 顯隱：點/邊是可以進行顯隱操作，顯隱操作有兩種規範，一種是消失，一種是漸隱。

  • 高亮：選中點/邊會觸發高亮操作：

    • 對於點的高亮，在高亮選中點的同時，也會點亮1度關聯點以及關聯邊，其他節點/邊會做漸隱處理
    • 對於邊的高亮，在高亮選中邊的同時，也會點亮關聯起止點，其他節點/邊會做漸隱處理
  • 擴散：點可以進行1度2度擴散，擴散時當前圖中節點會儘可能保持其穩定性前提下，跟進當前佈局選擇合適的佈局算法對擴展後的節點進行佈局(Tweak Layout)；同時與只對應的展開的點也可以進行收起操作。
  • 聚焦：聚焦操作通常用在點、邊、路徑的搜索操作中。是通過平移，縮放，高亮的技術把待聚焦的內容移動至畫布中心。

image.png

功能特性

image.png

Graphin主要提供了自動佈局、基礎分析、擴展機制、數據驅動、輔助分析以及高級分析幾個功能特性。

  • 其中自動佈局和基礎分析是Graphin的基石：深度定製的自動佈局算法保證了在常規場景下圖的可讀性和可分析性，避免Hair Ball問題; 基礎分析是上一章節交互規範的具現，保證了圖具有可分析的能力。
  • 數據驅動主要解決是Graphin的易用性，開發者不再需要學習大量的API，只需要更改數據即可完成大部分交互操作；而擴展機制主要賦予Graphin的定製性，通過該機制開發者可以享受與G6同等靈活度，從而滿足特殊業務領域高級定製需求
  • 高級分析和輔助分析主要沉澱了一系列從業務領域同抽象而來的分析能力，圖分析開發同學能夠使用這些分析能力迅速搭建出一個業務場景下真實可用的的分析應用。

自動佈局

一個優秀的圖分析案例，佈局永遠是需要放在第一位要考慮的因素。一個合理的的佈局算法能夠幫助用戶快速瞭解他正在分析的圖。目前圖分析領域佈局算法已經非常成熟，如Cambridge Intelligence這篇文章裡羅列了他們精心優化的八種佈局算法。

  • 通用佈局: Graphin和G6的同學也在佈局算法層投入大量的精力，針對圖分析場景做了大量的優化工作，Graphin中包含諸如力導佈局、圓形佈局、同心圓佈局、網格佈局、徑向佈局、有向分層等佈局算法。使開發者不再需要額外調整便能獲得一個不錯的佈局效果，從而增強圖的可讀性。

layout.gif

  •  增量佈局：與圖展示類應用不同，圖分析的過程是漸進式的，那如何保證在漸進分析過程中圖佈局算法的穩定性就顯得非常有必要。Graphin增量佈局方面也做了大量的優化。 下圖展示了在幾種常見佈局下，進行節點擴散分析後，佈局仍然能夠保持在一個相對穩定的狀態，從而避免了佈局後，節點位置跳動導致圖的可讀性降低問題。

layout_extend.gif

  • 大圖佈局：在某些特定分析場景下，需要在畫布上繪製的點/邊數量較多。而像力導佈局每次迭代的所消耗的計算資源也會增大進而阻塞JS線程使圖的繪製幀率很低，導致頁面卡頓， 即大圖佈局問題。Graphin採用Web Worker與補間動畫結合的技術，把計算量較大力導的迭代過程遷移到Web worker中進行,  使在點邊數量較多的場景下也能保證頁面的順滑。下圖呈現的是400個節點，800條邊的場景下圖的繪製情況。當然大圖佈局的優化策略也可以寫一篇文章了，這裡不再深入，先留個坑位。

layout_large.gif

  • 子圖佈局：如果圖中節點有明顯的分類，或者用戶需要針對圖中特定節點進行下一步分析，可以採用子圖佈局的方式對該部分節點進行重新佈局，選擇合適的佈局算法進一步增強圖的可讀性。下圖中你可以看到存在兩個子圖分別採用了Circle佈局和Radial佈局來呈現，佈局結果清晰明瞭，圖的可讀性非常強。

image.png

  • 場景化佈局: 還有一些數據在特定的佈局條件下會表現出更強的可讀性，比如在地圖中繪製帶有地理位置信息的數據。Graphin也有此類規劃，通過場景化佈局更好的描述分析數據。

image.png

  • 智能化佈局: 主要有兩層含義，一層是如何根據當前數據特徵自動選擇合適的佈局算法進行佈局，一層是如何解決子圖嵌入問題。目前該中類型佈局仍然在探索過程中，我們會在後續規劃中同步進展。

image.png

基礎分析

同交互規範章節內容。含搜索定位，關聯點邊高亮，節點鎖定，點邊顯隱等。感興趣的同學可以到 Graphin Studio  或者 Graph Studio 中體驗。

高級分析

image.png

  • 擴散分析：也叫漸進分析，關係發現，關係探查。旨在通過對目標節點進行1度2度查詢發現更多信息。同時擴散分析也往往與節點摺疊、節點過濾、節點顯隱等分析技術想結合，減少圖中干擾信息。
  • 算法分析：旨通過前後端算法能力幫助用戶迅速定位到分析目標，常用算法分析手段如關鍵路徑分析、最短路、模式匹配、中心度等。
  • 分組分析：也叫Cluster Analysis、團伙導航、Node Combos。旨在通過一定的分組策略把具有相同特徵的點/邊進行聚合。主要有節點分組、邊分組（也叫邊綁定）兩種類型。
  • 地理空間分析：地理空間分析是一種比較常見的分析方法，諸如地鐵圖線路圖，人口遷移圖等都屬於這個範疇。
  • 時序分析：是以時間序列為基礎去了解數據在一定時間內的趨勢、進行數據過濾、查看某特定時間點中數據信息，甚至預測未來趨勢的分析技術。目前廣泛用在安全風控，流量分析，金融分析領域，也是下一階段Graphin重點關注的能力。

輔助分析

此外Graphin還通過React 組件以及API的方式提供非常豐富的輔助分析能力，幫助用戶更好的分析能力。這些輔助分析能力包含:

  • 交互展示：工具欄，Tooltip，右鍵菜單
  • 佈局展示：MiniMap，魚眼，統計函數以及統計面板
  • 篩選展示：圖例，屬性篩選等

image.png

後分析

另外一個我們最近關注的圖分析能力，是圖的後分析能力，即如何增強用戶分析後的結果可讀性。這裡的後分析分為兩種：

  • 靜態後分析：把用戶分析後的結果以截圖，PDF, Excel的方式進行保存，已提供給決策者參考。這種場景下我們可以通過圖例，魔法棒，便籤的呈現元素增強圖的呈現效果。
  • 動態後分析：把用戶分析的結果以外鏈的方式發佈為獨立頁面，該分析結果具有一定的交互能力。用戶可以通過點擊，高亮，縮放等交互方式從分析結果中獲得更多的信息。

image.png

Hardware Store Market Basket Analysis

展望

image.png

FY21財年，Graphin規劃仍然圍繞業務發展，通過共建沉澱業務，通過業務打磨技術，以期完善能力，輻射更多產品。

參考資料

  1. Graph Analysis and Visualization: Discovering Business Opportunity in Linked Data https://www.wiley.com/en-us/Graph+Analysis+and+Visualization%3A+Discovering+Business+Opportunity+in+Linked+Data-p-9781118845844
  2. Wikipedia contributors. (2020, March 9). Graph (discrete mathematics). In _Wikipedia, The Free Encyclopedia_. Retrieved 09:57, April 7, 2020, from https://en.wikipedia.org/w/index.php?title=Graph_(discrete_mathematics)&oldid=944699319&oldid=944699319)
  3. Wikipedia contributors. (2020, March 23). Six degrees of separation. In _Wikipedia, The Free Encyclopedia_. Retrieved 12:14, April 7, 2020, from https://en.wikipedia.org/w/index.php?title=Six_degrees_of_separation&oldid=946988790
  4. Graphs Beyond the Hairball https://eagereyes.org/techniques/graphs-hairball
  5. 結合多人輸入的智能圖佈局算法 http://vis.pku.edu.cn/graphvis/zh-cn/igl_infovis12.html

Leave a Reply

Your email address will not be published. Required fields are marked *