圖佈局VS 人類是如何利用能源的?

blank

圖佈局VS 人類是如何利用能源的?

引言—— 你知道能源是如何流轉的嗎?人類是如何掌控能源的來源、中間環節、最終去向的?如何生成一張清晰表達能源流轉的圖?數以百計的圖佈局算法,究竟哪個適合展示能源流轉?本文將分析各種佈局,最終以最佳方式展現能源的流轉。如果你想直接查看能量圖最終結果及其分析,請直接滑至本文結尾處。

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

0 前言

從古至今,能源都是人類生存的基礎。古時候,人們利用如動物糞便、草木柴薪等生物能源為之提供光和熱。現代社會,能源的來源更豐富了:石油、核能、風力……人類更加離不開能源,它也是社會發展和經濟發展的推動力。能源的來源和節約是人們關注的問題。那麼,當今人類又是如何掌控和利用能源的呢,又有多少能源是被人類白白浪費的?為了分析上述能源數據,本文將與您一起探索如何製作能量圖可視化。如果您(不想看囉里八嗦的佈局選擇)想直接查看能量圖的最終可視化及其分析,請直接滑至本文結尾處

在上一篇Graph Visualization ·知多少:《 Hello World圖可視化》一文中,我們已經知道了圖的可視化方法主要有三種:弧線圖、鄰接矩陣、點線圖。其中,點線圖(如下圖,點線圖是由節點和線/邊構成的圖,節點是實體/對象,邊是對象間關係)是最為流行的一種。本文將圍繞點線圖,設計一個適合展示能源流轉的圖可視化。

1 能源數據-> 圖

本文使用的能源數據是各個能源環節之間的能源輸入、輸出關係。例如從太陽能到電能的能量流轉、電能到家用電的能量流轉等。

圖特別適用於展現實體/對象之間的關係。而能量數據的重要訊息也在於各環節之間的能量流轉關係。每個能源流轉/轉換是存在於兩個相關環節之間的。因此每個環節可以被視作點線圖中的節點,能源流轉則是連接兩個環節節點的邊。

2 能源圖VS 佈局

什麼是佈局?
佈局是點線圖中的節點位置的放置方式。相對應地,佈局算法是用於自動計算節點位置的算法。舉個栗子,上圖中太陽能節點在左側,電能節點在中間,其他節點在右側,這樣的安排就算是一種佈局。在節點較多、關係複雜的圖上,無法手動指定每個節點位置。此時可以藉助佈局算法,依據關係自動計算節點位置。有了合理的佈局,才能可視化出清晰的關係。

為什麼要用佈局算法?
以能源數據為例,如果要將能源數據呈現成為屏幕中的一張圖,就需要為每一個節點指定它在屏幕中的位置。然而能源數據中的對象和關係非常複雜,手動指定位置不現實(不信你手動擺一擺節點試試,能拖出一個合理美觀的圖算我輸),只能依靠強大的佈局算法。

blank
-PD:佈局算法這麼厲害,那我用一下就完事兒了唄? -我:NoNo,佈局算法有好多好多呢,下圖隨便列舉了幾個,你隨意感受一下,你知道哪種更好嗎? - PD:as#%9jafsk31#!!!...

佈局方法千千萬,究竟哪種最好?我們認為,佈局沒有好壞之分,只有適合與否之分。根據不同的數據結構、使用場景、分析需求,選定一個合適的佈局是一個圖可視化是否成功的關鍵。下文將分析各類佈局中較為常見的算法,最終選取適合能源圖的佈局。

在圖可視化中,根據其數據的結構中是否存在環,可以歸類為一般圖和樹圖(Tree Graph)。一般圖允許存在環,而樹圖中不存在環。下面,我們將分析多種樹圖佈局、一般圖佈局,以選擇和適用於能源流轉的圖可視化佈局。

2.1 樹圖佈局

離散數學告訴我們,樹是一種數據結構。相比於一般圖的數據結構,樹圖不存在環,除根節點外,每個節點只有一個先繼(父)節點。樹更簡單、更易理解。

樹圖常被應用在家譜、生物進化等表達中,從根到葉子的一條路徑代表了從源頭到最終形態的過程(我是7號,我爸爸的爸爸的爸爸是誰?)

對於樹圖,研究者們提出了不少樹圖的佈局。這些佈局各有優劣,圖3(左) [1]最為直觀,但它對屏幕空間的利用率不高。圖3(中) [1]將樹根據節點的深度佈局成輻射狀,以更好地利用空間。圖3(右) [2]顯示的氣球佈局將子樹佈局到父節點周圍。但後兩種方法不如圖3 (左)圖清晰,用戶常常在探索過程中感到困惑。

blank
圖3. 點線圖佈局策略:(左)大規模圖的經典層次視圖。 (中)輻射狀視圖。 (右)氣球視圖。

對於經典的層次視圖,根據層級之間的放置規律,已有一些成熟的算法,圖4使用G6提供的幾種樹圖佈局(在線demo點【這裡】

blank
圖4. 使用G6 繪製的樹圖:(左)緊湊樹佈局CompactBox 將深度相同的節點放置在同一視覺層級上。 (中)腦圖樹佈局Mindmap 可以將分支分離到根節點的左右兩側。 (右)輻射樹佈局。

與樹圖相似,能源圖希望表達從能源的來源到最終去向的路徑。但別忽略了其中的環結構:如下圖,由於能源的流失也算是一個去向節點,電力的來源可能來自於核能、風能等,電力的去向也可能是工業或流失等,而核能也可能直接流失了。顯然,由於數據結構的問題,能源圖應該被劃分到一般圖。上述樹圖佈局都不適用。

2.2 樹+ 回溯邊(非樹邊)佈局

既然能源圖數據不是一個樹結構,那麼,我們是否能藉助樹圖的層次和簡明性,降低其複雜性呢?一些圖可視化研究者從一般圖的抽取一棵生成樹進行展示,不展示回溯邊(非樹邊)。例如圖5展示了從灰色的原圖計算了其最小生成樹(紅色):

圖5. 原圖是灰色及紅色所有元素組成的圖,所有節點及紅色邊構成的圖是原圖的最小生成樹(Minimum Spanning Tree)。

但直接展示最小生成樹必然丟失一些重要的關係訊息(非樹邊)。因此,一般圖還可以被可視化為樹+ 非樹邊。在繪製完生成樹後,將剩餘的非樹邊繪製回圖上(見圖6(左)[3])。例如經典的樹圖[3],輻射狀視圖[4],以及treemap 視圖[5][6]。許多可視化系統,例如[3][4][6][7][8][9][10][11][3],都使用了這種方法。

blank
圖6. 樹+邊佈局:(左)經典樹佈局增加了其他非樹邊。 (中)輻射狀視圖增加了其他非樹邊。 (右)Treemaps 視圖增加了其他非樹邊。

現在,我們嘗試使用樹圖+ 回溯邊的方式佈局能源流轉圖。樹圖雖然易於觀察和探索,但選取的根節點合適與否將會影響整個圖的表達,根節點一般是一個能夠代表圖的起源或開端的節點(爸爸的爸爸的爸爸是不能亂選的! ) 。圖7 所示的能源圖樹佈局選取的根節點並不是所有能源環節的源頭,這是因為能源圖中的起源點可能不只一個,核能、石油、風能、潮汐能一類能源的最初形態都是能源流轉的起源。也就是說在該圖上,選取任何一個節點作為根節點都不合適。另外,圖7(右)將非樹邊繪製回圖上後,產生了一些很長的邊,跨越整個圖,造成了眾多邊交叉,這些是不符合圖佈局的美學原則[11]的。 (啊餵,那幾條豎直的邊,你到底是要連到誰呀。)

知乎圖片好模糊呀,看高清圖點【這裡】

blank
圖7. (左)從能源圖抽取的樹,使用緊湊樹佈局。 (右)將非樹邊(淺灰色邊)繪製到左圖的樹佈局中。

雖然在這種佈局方式在能源圖上不適用,但若數據的邊是包含層次關係類型的多種類型的邊,樹+邊佈局則非常適用。例如,WebMap [8]一文設計了用戶網頁瀏覽器瀏覽歷史記錄的可視化。如果網頁A 被第一次訪問,一個代表該網頁的新節點將會被添加在它的先繼節點(即代表上一個網頁的節點)之後。如果網頁A 曾經被瀏覽過,當其再次被瀏覽時,一個穿過樹結構的非樹邊將會被創建以連接節點A 和它的先繼節點。

2.3 其他佈局方法

既然使用樹佈局的方法展示非樹結構的能源圖不合適,下文將嘗試其他一般圖佈局方法。 (不要為了一棵樹放棄一片森林啊。)

2.3.1 彈簧佈局/ 力導向佈局

彈簧佈局,即被熟知的力導向佈局,是另一種流行的一般圖佈局策略。在彈簧佈局中,一般圖被建模成具有環和彈簧的物理系統。作為繪製一般圖的最早實際算法之一,彈簧佈局最早在1984 年被Eades[12]提出後,被許多研究重新定義和改進[13][14][15][16][17]

圖7. 力導向佈局。

擴展:研究人員還嘗試使用彈簧的原理減少節點的重疊[10][18]。完全解決一個小空間範圍內的圖中所有節點的重疊問題,已被證明是NP難的[19] (PD:能不能把這個邊交叉、點重疊搞少一點,好醜好亂。我:優化優化可以,全部消除是莫得辦法的呀,NP難的世界難題,你給我搞筆科研經費我給你研究一輩子試試。)

圖8 嘗試使用力導向佈局展示能源圖,節點大小映射了該能源環節點的總能量值;邊的箭頭代表能源流轉的方向,粗細代表沿該流轉的能量值。可以發現與電力網(Electricity grid)節點相關的邊數量最多,但它的總能量值不如熱能生成(Thermal generation)節點,這是個有趣的發現,原來人們對電能的產生和使用渠道比較多,但對熱能的需求量更高。同樣,從節點大小和相關邊數量還可以看出,人類對太陽能(Solar)、氫氣能(H2)、風能(Wind)等清潔能源的利用還比較小。

知乎圖片好模糊呀,看高清圖點【這裡】

blank
圖8. 使用力導向圖佈局展示能源圖。

雖然力導向圖能夠帶給我們一些有趣的訊息,但我們還是難以清晰了解能源從產生到使用的各環節流轉情況。力導向圖的另外一個弊端在於,它的計算量龐大(需要O(n^3) 甚至O(n^4) 的時間複雜度),一遇到大規模圖算法就要宕機了。而且,力導向算法在可預測性方面存在缺陷—— 相同算法在同樣的輸入下,每次運行的結果可能完全不同。由於用戶的導航探索重度依賴於圖的視覺表現,這種不可預測性在某些場景中導致了一些嚴重的問題。如圖9 所示,力導向算法在能量圖數據上又運行了3 次,均產生了不同的佈局結果,這將導致用戶在探索、對比時的心理地圖遭到破壞。 (PD:喂喂,這幾張真的是同一幅圖嗎?你的代碼是不是有問題,改了我的數據!?我:冤枉啊。)

blank
圖9. 使用同樣的數據,每次運行經典力導向算法的佈局結果都不同。

2.3.2 形狀導向的點線佈局

為突出某些訊息或達到某些視覺需求,一些形狀導向的點線佈局被提出。例如環狀佈局(Circular Layout)可用於突出數據結構中的環,但如圖10(左)將之應用到非環結構的圖上時,節點的排列順序將會影響邊的交叉數量;再如圖10(中)的格子佈局(Grid Layout)可以讓簡單圖看起來十分規整,但在關係複雜的圖上將會出現大量長邊和邊交叉。顯然,這兩種佈局對於分析能源圖沒有太大的幫助,只能滿足一種“整齊”的視覺需求。 (PD:嗯嗯,一家人整整齊齊,真不錯。我:這...你能分析出啥?)

知乎圖片好模糊呀,看高清圖點【這裡】

blank
圖10. 使用G6 製作的形狀導向佈局:(左)環狀佈局。 (中)格子佈局。 (右)輻射狀佈局。

輻射狀佈局(Radial Layout)是輻射狀樹佈局[1]的擴展,可突出關注點與其他節點的最短路徑關係。圖11 使用G6 展示了能量圖的輻射狀佈局,其關注點是核能(Nuclear)。作為能源起源點之一,根據其輸出可以發現核能(Nuclear)的能量全部用於熱轉換(Thermal generation)。根據關係邊的粗細可以發現,熱轉換後大部分流失了(Losses) (心疼1秒鐘) ,還有一部分被轉換為電力(Electricity grid)和供暖(Distrct heating),接下去用戶可以探索電力網的直接輸入與輸出環節。輻射狀佈局適用於探索關注點的一度關係、二度關係、...等,但在能源圖上,我們更希望從多個能源起源點出發,關注能源流轉。因此,輻射狀佈局並不完全適用。

知乎圖片好模糊呀,看高清圖點【這裡】

blank
圖11. 使用G6 展示輻射狀佈局的能量圖。

2.3.3 層次/ 流程圖佈局

為了展示能量圖中各環節的流轉,流程圖似乎比較適合。我們嘗試使用層次佈局算法Dagre 進行佈局,它根據有向圖數據中邊的方向將節點進行分層。如圖12 所示,能源的起源點(只有輸出邊,沒有輸入邊的節點)大部分被放置在了第一層(最左側),把源頭放在開始觀察的位置比較符合能源圖的觀測需求,但如核能(Nuclear)、風能(Wind)等部分起源節點並沒有被放置在第一層,這是Dagre 的計算機制導致的。因此,層次佈局仍然不能完美地符合“源頭-> 中間環節-> 最終輸出”的觀察過程。

知乎圖片好模糊呀,看高清圖點【這裡】

blank
圖12. 使用G6 內置的Dagre 層次佈局算法展示能源圖。

2.3.4 流圖/ 桑基圖—— 最終選擇

(PD:有完沒完了,快給我個痛快!我:喳,瞧好了您吶。)嚴格來說,桑基圖不算是完全意義上的點線圖。與流程圖類似,它將自動根據邊的走向對節點進行分層以表達流向(一般是從左到右),並使用高度不同的矩形代表節點,帶有寬度的邊代表兩端點間流量,一個節點輸入邊寬之和或輸出邊寬之和等於節點的高度,從而可以映射每種流量的佔比。 (說起來有點抽象,看圖13 就明白啦。)

由上文中的流程圖得到啟發,我們重新審視能量圖可視化的需求:

  • 滿足“源頭-> 中間環節-> 最終輸出”的層次觀測觀測需求;
  • 能夠展示出節點、邊的流量(能量值)及其占比;
  • 能量的流轉方向。

總而言之,能量圖最重要的是表達“流”、“層次”訊息。那麼,流圖或桑基圖應該特別適用。如圖13 所示,節點高度表示該環節總能量值,邊的粗細代表其兩端點之間的能量傳輸值。所有的起源節點被放置在第一層(最左側),最終輸出節點在最後一層(最右側)。可以清晰探索每一條能源流的走向、環節。

知乎圖片好模糊呀,看高清圖點【這裡】 。交互Demo點【這裡】

blank
圖13. 使用G6 繪製的能量流轉桑基圖。

(我:PD大大,來分析一波吧)基於圖13的能量流轉桑基圖,可以分析:

  • 根據節點大小可以發現核能(Nuclear)的能量值是所有能源源頭中能量值最高的,其次是石油(Oil imports)、風能(Wind);
  • 能源最終輸出中,最大的一部分竟然是被流失了(Losses) (人類真該好好思考如何提高能量轉換率呢),其次是工業(Industry)、家庭採冷暖(Heating and cooling -homes);
  • 在中間環節裡,熱能轉換(Thermal generation)的能量值最高,其次是電力網(Electricity grid);
  • 還可以發現能源可以被劃分為固體(Solid)、氣體(Gas)、液體(Liquid)三類,其中包含石油在內的液體佔比最高,它的主要使用場景是運輸(公路運輸Road transport,海運International shipping、航運International aviation)及工業,而氣體、固體則主要用於產熱與產電;
  • 人類對清潔能源的使用量不高,代表潮汐能(Tidal)、太陽能(Solar)、氫氣能(H2)、水電(Hydro)的節點都非常小;
  • 有一種少見的能源——海藻能(Marine algae)出現在了起源節點中,查閱相關資料發現這是一種綠色能源,可以用於製作海草燃料和海草油;
  • ...... 更多訊息由您來探索啦。

3 結束語

點線圖可視化依賴於圖佈局算法,應當根據數據特性、分析需求、結合終端用戶的心智,在茫茫算法中選擇合適的一種。圖可視化不是只有力導向一種,力導向圖並不能解決所有需求鴨。

兩個點,一條邊,就是一幅圖:圖可視化就是這麼簡單;但它又變化無窮,姿態萬千:圖可視化又是這樣複雜。時而極簡,時而繁華,時而文藝,時而張揚,這就是圖可視化的魅力所在吧。

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

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

參考

  1. ^ abchttps://ieeexplore.ieee.org/abstract/document/1173152/
  2. ^ https://pdfs.semanticscholar.org/972c/884f590643a2dcee25d87747fc53399dea7a.pdf
  3. ^ abcdhttps://www.academia.edu/5636645/Latour_A_Tree_Visualisation_System
  4. ^ abhttps://ieeexplore.ieee.org/document/1249009/
  5. ^ https://pdfs.semanticscholar.org/2f43/a4490ef40fb15f23068a8f6dcca125207c8a.pdf
  6. ^ abhttp://www.cs.jhu.edu/~misha/ReadingSeminar/Papers/Holten06.pdf
  7. ^ https://www.researchgate.net/publication/6715557_Measuring_Data_Abstraction_Quality_in_Multiresolution_Visualizations
  8. ^ abhttps://www.sciencedirect.com/science/article/pii/0169755295001036
  9. ^ https://www.academia.edu/25370586/Web-Based_Visualization_of_Large_Hierarchical_Graphs_Using_Invisible_Links_in_a_Hyperbolic_Space
  10. ^ abhttps://link.springer.com/chapter/10.1007/11555261_67
  11. ^ abhttps://www.researchgate.net/publication/30508476_Validating_Graph_Drawing_Aesthetics
  12. ^ http://www.it.usyd.edu.au/~peter/old_spring_paper.pdf
  13. ^ http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.13.8444&rep=rep1&type=pdf
  14. ^ https://www.researchgate.net/publication/30508672_Improved_Force-Directed_Layouts
  15. ^ http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.31.9809
  16. ^ https://www.researchgate.net/publication/240580515_A_Multidimensional_Approach_to_Force-Directed_Layouts_of_Large_Graphs
  17. ^ http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.69.7213&rep=rep1&type=pdf
  18. ^ https://www.sciencedirect.com/science/article/pii/S1045926X85710105
  19. ^ http://www.wisdom.weizmann.ac.il/~harel/papers/highdimensionalGD.pdf

What do you think?

Written by marketer

blank

最簡化VUE的響應式原理

blank

騰訊視頻Node.js 服務是如何支撐國慶閱兵直播高並發的?