Hello World 圖可視化

blank

Hello World 圖可視化

引言—— 圖可視化是訊息可視化的子領域,它通過展示元素、關係,幫助用戶獲取數據的洞悉能力。它已被廣泛地應用在流程圖、社交網絡、英特網、蛋白質網絡等關係數據的呈現。本文參考[1][2]兩篇圖可視化學術論文,簡要介紹圖可視化的歷史、背景、機遇與挑戰。

G6 —— 專業的圖可視化引擎。讓關係數據變得簡單透明,讓用戶獲得Insight。
G6官網: antv.alipay.com/zh-cn/g 。歡迎關注。
GitHub: github.com/antvis/g6 。歡迎Star。

什麼是“圖”?

中文字“圖”在大家的傳統認知裡指的是圖畫、圖像,而圖論與可視化中的“圖”—— Graph 則有著更精確的定位:主體(objects)與關係(relationships)的組成。它甚至不局限於視覺,主體與關係的數據也可以稱為圖。而呈現到視覺上,即圖可視化,一般有以下幾種表達方式:

blank
圖1 (左)Arc Diagram 弧線圖。 (中)Adjacency Matrix 鄰接矩陣。 (右)Node-Link Diagram 點線圖。

而以上三種圖在不同的場景中由於主體樣式、佈局方式的不同,又有著各自的變種。例如弧線圖的變種Chord Diagram 弦圖(圖2 左),點線圖的變種Radial Tree 輻射樹圖(圖2 右)。

blank
圖2 (左)Chord Diagram 弦圖。 (右)Radial Tree 輻射樹圖。

如今,圖已經被深入應用到各個領域中,而它的起源帶著一絲神秘的色彩……

圖之起源

圖是一種傳統且強大的工具,它在幫助人類交流、理解世界、解決科學問題上有著悠久的歷史。圖概念的出現最早可追溯到古埃及((Rameses I 1400-1366 BC)[3],圖被用在了一種名為“Morris”的遊戲中。

看來這位法老在其在位僅有的一年零四個月中,子民遊戲人生很幸福。
blank
圖3 Morris 遊戲。來自13世紀的“Book of Games”。

在那古老的年代,人們大概只覺得圖“有趣”,它強大的科學用途一直沒被發現。直到1736年,偉大的數學家和物理學家——萊昂哈德·歐拉:

出版了著名的關於柯尼斯堡七橋問題的論文。在該論文中,歐拉使用圖的思想解決了路徑追溯問題,即七橋問題。這標識著早期圖到現代圖繪製的轉換。

然而,歐拉的圖更像是一個“(靈魂畫手的)圖畫”,而並非現代常見的“圖”(見圖4 左)。 150 年後的1892 年,Ball :

這位數學家同時也是一位律師,文理果然不分家!

在他關於數學的書中,將歐拉的“圖畫”首次被抽像地展示[4],使用點線圖的形式表達(見圖4 右)。

blank
圖4 七橋問題的圖繪製:(左)歐拉在其論文中的繪製。 (右)1892 年Ball 的抽象版本。

典型應用場景

圖可視化已被應用在諸多領域中。常見的計算機系統中的文件層可以被表示成一棵樹圖,而樹圖是圖的一種特殊形式。用戶在尋找指定文件而探索文件層次時,圖的優勢得以體現—— 可以通過在樹圖中“ 順藤(邊)摸瓜(點)”。

在生物和化學領域,圖被應用到發展樹、進化樹、原子圖、基因圖、生化途徑圖、蛋白質功能等。 (震驚:物種的進化、基因的奧秘都在偉大的圖可視化中了!)

blank
圖5 (左)生物進化樹。摘自:生物八年級下冊第七單元生物圈中生命的延續和發展。 (右)DNA 分子結構模式圖。摘自:高中生物2 遺傳與進化人教版。國際雞基因組測序協會(真是個神秘組織)發現人類與雞的基因有60% 的相似度。

其他應用領域包括面向數據結構、實時系統、數據流圖、子程序調用圖、整體關係圖(如UML 和數據庫結構)、語義網絡和知識圖譜、電路原理圖等。需要注意的是,訊息並不總是有層次結構的,圖的技術應該能夠處理更一般化的圖,而不僅僅是樹。

blank
圖6 (左)簡單的流程圖。 (中)UML 圖。 (右)電路圖。

圖能夠成為強大的可視化工具,主要有以下幾個原因:

  • 圖是一種可以被應用到多領域的、非常簡單的模型。任何含有內部關係的數據都可以被建模成為圖。如:萬維網(World-Wide Web)—— 節點代表了網頁,邊代表了網頁之間的超級鏈接。另外還有很多關於人際關係、物種樹、計算機文件系統等例子。
  • 圖是一種有特定定義的抽象概念。經過幾百年的發展,圖論有了非常堅實的基礎,和一套強大的領域獨立算法,可以有效地處理圖形。
  • 人類擁有強大的視覺處理能力。作為可視化工具,圖可以通過提供額外的記憶幫助,改變一個任務的本質。訊息可以直接被感知和使用,而無需明確解釋和製定。
  • 對於圖和其他常用的視覺設計原則,例如預估、相似性、閉合型、連續性、對稱性、相對大小等,Palmer 與Rock[7] 認為使用邊連接不同的圖形元素能夠更清晰地表達元素之間的關係。從這一點出發,當用戶試圖通過視覺來探索帶有內部關係的數據時,他們會發現圖比其他視覺表達更好。

圖的主要問題和挑戰

作為訊息可視化的一個子領域,圖可視化常涉及到節點、連接的表達,以及探索視覺上的表達,幫助用戶理解整體或局部的原始數據結構。這是一個複雜的領域,涉及到計算機科學、物理、符號學、圖形學設計、分類學、藝術。同時,它也使得分析帶關係的數據變得充滿挑戰。

1.圖的規模

在圖可視化中,一個主要的挑戰是圖的規模。大數據時代帶來的大規模圖可能會導致以下難點:

  • 算法複雜性:圖的規模在某些場景中是算法的致命問題。由於大多數圖算法是NP 複雜度,或是NP 難的。因此,一些佈局算法在大規模圖上完全無法運行。即便是算法的時間複雜度可以忍受,冗長的處理時間同樣使得圖可視化難以提供實時交互的性能。
  • 顯示混亂:當數據的規模增長時,對應的圖在視覺上將會越來越混亂,令人困惑,用戶在分析節點和邊時會更加困難。在一些極端的例子中,數據量可能大到超出顯示像素。
blank
圖7 數據量巨大,視覺嚴重混亂。稱為Hair Ball。
  • 可讀性:即使圖的大小在屏幕視窗空間中還能夠被忍受,如何向用戶高效地傳遞訊息仍然充滿挑戰,這是由於人類的感知能力常常只能在小規模圖上發揮作用。 Ghoniem[5] 等人證明了進行“定位節點或尋找兩點之間的邊”這樣簡單的任務時,即使圖的規模只有50 個節點,點線圖的表現依然很差。如下圖:
blank
圖8 含有50 個節點,400 條邊的圖可視化。 [5]
  • 導航探索:人們對於真實世界中的詳細訊息和全局上下文的具有習慣性的感知。但是,在視覺上導航探索一個巨大的訊息空間時,將會遇到無法將大規模空間數據展示在一個小屏幕上的問題。如何在不丟失任何訊息的情況下導航一個大規模圖也是一個挑戰。

2.數據結構複雜度

除了圖的規模,數據結構的複雜度是另一個挑戰。許多數據元素可能包含三個以上的屬性。例如,Facebook 的社交網絡中,節點帶邊了人,邊代表了人際關係連接。節點上帶有的訊息可能有年齡、性別、身份。邊同樣有許多不同的類別,例如同事關係、同學關係、家庭關係等。此時,挑戰就在於如何自然地同時表達所有的訊息。最常見的解決方案是使用視覺線索(Visual Cues)。例如顏色、形狀、透明度等映射不同的屬性。

blank
圖9 使用視覺線索標識元素的不同屬性。

然而,視覺映射可能會導致另一個挑戰:哪一種才是映射不同屬性的最好方式?由於人類感知系統的限制,一些視覺通道可能有著更強大的表達能力。例如,大小和長度更適合高效地展示量化的數據,但對於離散型、枚舉型數據則不適用。使用顏色相對而言更能分辨此類數據。如何優化視覺通道,從而高效地給用戶傳遞訊息,目前仍然是不清晰的。

圖可視化的最終目標是幫助用戶理解和分析數據,不同的佈局將會給用戶帶來不同的感覺,例如下圖中展示的同一幅圖的兩種畫法。兩圖中唯一的區別是邊的曲率,但它們強調了不同的路徑。從這個視角而言,圖可視化的高效性對於研究者來說是一個巨大的挑戰。

blank
圖10 相同圖的不同繪製方式強調了不同的路徑。 [6]

結束語

圖可視化—— 一個可炫酷、可嚴謹、可內涵、可小眾、可普惠的關係數據探索工具,它所面臨的問題是挑戰,更是機遇。作為跨學科領域,圖可視化需要來自更多行業的輸入和共建。 (建設圖可視化,關係你我他它。)

想要看到更多圖可視化小知識,持續關注《Graph Visualization ·知多少》哦!

G6 —— 專業的圖可視化引擎。讓關係數據變得簡單透明,讓用戶獲得Insight。
G6官網: antv.alipay.com/zh-cn/g 。歡迎關注。
GitHub: github.com/antvis/g6 。歡迎Star。

參考文獻

[1] Herman, Ivan, Guy Melançon, and M. Scott Marshall. " Graph visualization and navigation in information visualization: A survey. " IEEE Transactions on visualization and computer graphics 6.1 (2000): 24-43.
[2] Weiwei Cui. " A Survey on Graph Visualization "
[3] Parker, Henry. "An Account of the Aborigines and of Part of the Early Civilization." London: Luzac and Co (1909).
[4] Ball, Walter William Rouse. Mathematical recreations and essays . Macmillan, 1914.
[5] Ghoniem, Mohammad, Jean-Daniel Fekete, and Philippe Castagliola. "On the readability of graphs using node-link and matrix-based representations: a controlled experiment and statistical analysis." Information Visualization 4.2 (2005): 114-135 .
[6] Ware, Colin. "The visual representation of information structures." International Symposium on Graph Drawing . Springer, Berlin, Heidelberg, 2000.
[7] Palmer, Stephen, and Irvin Rock. "Rethinking perceptual organization: The role of uniform connectedness." Psychonomic bulletin & review 1.1 (1994): 29-55.

What do you think?

Written by marketer

blank

10分鐘徹底搞懂前端頁面性能監控

blank

官宣!第十四屆D2 來了!