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

時間 2019-11-05

標籤佈局人類如何利用能源简体版

原文原文鏈接

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

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

0 前言

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

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

1 能源數據 -> 圖

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

圖特別適用於展示實體/對象之間的關係。而能量數據的重要信息也在於各環節之間的能量流轉關係。每一個能源流轉/轉換是存在於兩個相關環節之間的。所以每一個環節能夠被視做點線圖中的節點，能源流轉則是鏈接兩個環節節點的邊。git

2 能源圖 VS 佈局

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

爲何要用佈局算法？
以能源數據爲例，若是要將能源數據呈現成爲屏幕中的一張圖，就須要爲每個節點指定它在屏幕中的位置。然而能源數據中的對象和關係很是複雜，手動指定位置不現實（不信你手動擺一擺節點試試，能拖出一個合理美觀的圖算我輸），只能依靠強大的佈局算法。github

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

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

在圖可視化中，根據其數據的結構中是否存在環，能夠歸類爲通常圖和樹圖（Tree Graph）。通常圖容許存在環，而樹圖中不存在環。下面，咱們將分析多種樹圖佈局、通常圖佈局，以選擇和適用於能源流轉的圖可視化佈局。算法

2.1 樹圖佈局

離散數學告訴咱們，樹是一種數據結構。相比於通常圖的數據結構，樹圖不存在環，除根節點外，每一個節點只有一個先繼（父）節點。樹更簡單、更易理解。spring

樹圖常被應用在家譜、生物進化等表達中，從根到葉子的一條路徑表明了從源頭到最終形態的過程（我是 7 號，我爸爸的爸爸的爸爸是誰？）。

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

圖 3. 點線圖佈局策略：（左）大規模圖的經典層次視圖。（中）輻射狀視圖。（右）氣球視圖。

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

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

與樹圖類似，能源圖但願表達從能源的來源到最終去向的路徑。但別忽略了其中的環結構：以下圖，因爲能源的流失也算是一個去向節點，電力的來源可能來自於核能、風能等，電力的去向也多是工業或流失等，而核能也可能直接流失了。顯然，因爲數據結構的問題，能源圖應該被劃分到通常圖。上述樹圖佈局都不適用。app

2.2 樹 + 回溯邊（非樹邊）佈局

既然能源圖數據不是一個樹結構，那麼，咱們是否能借助樹圖的層次和簡明性，下降其複雜性呢？一些圖可視化研究者從通常圖的抽取一棵生成樹進行展現，不展現回溯邊（非樹邊）。例如圖 5 展現了從灰色的原圖計算了其最小生成樹（紅色）：dom

圖 5. 原圖是灰色及紅色全部元素組成的圖，全部節點及紅色邊構成的圖是原圖的最小生成樹（Minimum Spanning Tree）。

但直接展現最小生成樹必然丟失一些重要的關係信息（非樹邊）。所以，通常圖還能夠被可視化爲樹 + 非樹邊。在繪製完生成樹後，將剩餘的非樹邊繪製回圖上（見圖 6（左）^[3]）。例如經典的樹圖^[3]，輻射狀視圖^[4]，以及 treemap 視圖^[5]^[6]。許多可視化系統，例如^[3]^[4]^[6]^[7]^[8]^[9]^[10]^[11]，都使用了這種方法。佈局

圖 6. 樹+邊佈局：（左）經典樹佈局增長了其餘非樹邊。（中）輻射狀視圖增長了其餘非樹邊。（右）Treemaps 視圖增長了其餘非樹邊。

如今，咱們嘗試使用樹圖 + 回溯邊的方式佈局能源流轉圖。樹圖雖然易於觀察和探索，但選取的根節點合適與否將會影響整個圖的表達，根節點通常是一個可以表明圖的起源或開端的節點（爸爸的爸爸的爸爸是不能亂選的！）。圖 7 所示的能源圖樹佈局選取的根節點並非全部能源環節的源頭，這是由於能源圖中的起源點可能不僅一個，核能、石油、風能、潮汐能一類能源的最初形態都是能源流轉的起源。也就是說在該圖上，選取任何一個節點做爲根節點都不合適。另外，圖 7（右）將非樹邊繪製回圖上後，產生了一些很長的邊，跨越整個圖，形成了衆多邊交叉，這些是不符合圖佈局的美學原則^[11]的。（啊喂，那幾條豎直的邊，你究竟是要連到誰呀。）

圖 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）等清潔能源的利用還比較小。

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

雖然力導向圖可以帶給咱們一些有趣的信息，但咱們仍是難以清晰瞭解能源從產生到使用的各環節流轉狀況。力導向圖的另一個弊端在於，它的計算量龐大（須要甚至的時間複雜度），一遇到大規模圖算法就要宕機了。並且，力導向算法在可預測性方面存在缺陷 —— 相同算法在一樣的輸入下，每次運行的結果可能徹底不一樣。因爲用戶的導航探索重度依賴於圖的視覺表現，這種不可預測性在某些場景中致使了一些嚴重的問題。如圖 9 所示，力導向算法在能量圖數據上又運行了 3 次，均產生了不一樣的佈局結果，這將致使用戶在探索、對比時的心理地圖遭到破壞。（PD：喂喂，這幾張真的是同一幅圖嗎？你的代碼是否是有問題，改了個人數據！？我：冤枉啊。）

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

2.3.2 形狀導向的點線佈局

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

圖 10. 使用 G6 製做的形狀導向佈局：（左）環狀佈局。（中）格子布局。（右）輻射狀佈局。

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

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

2.3.3 層次 / 流程圖佈局

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

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

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

（PD：有完沒完了，快給我個痛快！我：喳，瞧好了您吶。）嚴格來講，桑基圖不算是徹底意義上的點線圖。與流程圖相似，它將自動根據邊的走向對節點進行分層以表達流向（通常是從左到右），並使用高度不一樣的矩形表明節點，帶有寬度的邊表明兩端點間流量，一個節點輸入邊寬之和或輸出邊寬之和等於節點的高度，從而能夠映射每種流量的佔比。（提及來有點抽象，看圖 13 就明白啦。）

由上文中的流程圖獲得啓發，咱們從新審視能量圖可視化的需求：

知足「源頭 -> 中間環節 -> 最終輸出」的層次觀測觀測需求；
可以展現出節點、邊的流量（能量值）及其佔比；
能量的流轉方向。

總而言之，能量圖最重要的是表達「流」、「層次」信息。那麼，流圖或桑基圖應該特別適用。如圖 13 所示，節點高度表示該環節總能量值，邊的粗細表明其兩端點之間的能量傳輸值。全部的起源節點被放置在第一層（最左側），最終輸出節點在最後一層（最右側）。能夠清晰探索每一條能源流的走向、環節。

交互 Demo 點【這裏】。

圖 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 · 知多少》哦！