減少視覺認知混淆之互動式網路視覺化系統

Ambiguity-Free Edge Bundles for Interactive Network Visualization

劉俊良(Chun-liang Liu)

指導教授 ： 陳炳宇

國立臺灣大學/管理學院/資訊管理學研究所/碩士(2009年)

https://doi.org/10.6342/NTU.2009.02353

摘要

在本篇論文裡，將提出一個以減少Graph Edge所引起的視覺混淆為主要目標的互動式網路視覺化架構。在視覺化實務上的關聯性資料時，例如Traffic Network或Social Network，被使用來呈現兩項目(Graph Node)之間關聯性的Graph Edge往往會和不相關的項目過於接近甚至有重疊，造成視覺上錯誤的關聯性認知；另外，在同一區域內聚集的Graph Edge在視覺上造成圖形密集的交錯或重疊，也會顯著地降低該區域網路的可讀性。

為求提升Edge layout的可讀性和美觀性，同時減少Edge在解釋關聯性上潛在的不明確問題，我提出此架構，改善由Graph Edge所造成的視覺混淆雜亂問題，同時加強使用者視覺上關聯性感受和實際關聯性資料兩者間的一致性。我們的演算法採用有效率且一般性Quadtree結構，各項目原始的位置資訊也將被保留，可和現存的視覺化系統作結合。為了提供使用者一個易於使用的互動介面，我也提出一個創新的detail-on-demand概念，讓使用者能夠在顯示空間中簡單地繪出分布，自行變更各區域的level-of-detail設定。

關鍵字

資訊視覺化 ； 關聯圖視覺化 ； 圖邊混淆 ； 圖邊壅塞 ； 圖邊束化

並列摘要

Graph visualization has been widely used to visualize relationship among data (e.g. traffic network, citation network and social network) for people to perceive adjacency relationship. However, there exists a common challenge that edge congestions caused by cluttered edges bring about visual clutter and significantly reduce the readability of graph in low-level of view. Another phenomenon which is more critical in low-level of view is edge ambiguity, the problem of edge ambiguity which is caused by node-edge overlapping decreases the consistency between relations which are visually perceived by users and actual relational dataset.

In this paper, I presented an ambiguity-free edge-bundling technique for visualizing graph or network data with an interactive tool. My technique automatically generated edge-bundling layout with less edge ambiguities while viewers desire to learn details from specific regions of graphs; this technique also improves the representation of edge layouts which originally have problems of edge-edge congestion and further helps viewers to easily understand connections between nodes with more accuracy and efficiency.

The network visualization system to be presented contains two features: ambiguity-free edge-bundling and user-defined level-of-detail map. Ambiguity-free edge-bundling was designed to relieve problems of edge ambiguity and edge congestion in graph visualization which often contains small-world properties and the proposed technique improves the representation of edge layout in detail view of graph without needs of interacting effort. In many applications, node positions have semantic meaning, examples such as traffic network and map; according to this, my technique also preserves node placement without recognizable adjustment.

To make it more adaptable for various graph applications, the proposed technique uses an efficient and generic quadtree structure that could be applied in conjunction with existing graph or network visualization systems, the required inputs are the node placement and the relationship between nodes. My framework also provides users an easy-to-use interactive tool, a novel detail-on-demand concept called user-defined level-of-detail map, to make users be able to modify the level-of-details regionally by painting on the display.

並列關鍵字

Graph Visualization ； Network Visualization ； Edge Ambiguity ； Edge Congestion ； Edge Bundle ； Detail-on-Demand

參考文獻

[2] T. Dwyer, K. Marriott, and M. Wybrow. Integrating edge routing into force-directed layout. In Graph Drawing, pages 8–19, 2006.

[3] T. Dwyer, K. Marriott, and M. Wybrow. Topology preserving constrained graph layout. pages 230–241, 2009.

[4] P. Eades and R. Tamassia. Algorithms for drawing graphs: An annotated bibliography. Technical report, 1988.

[5] I. Herman, G. Melanc﹐on, and M. Scott Marshall. Visualiation and navigation in information visualization: A survey. IEEE Transactions on Visualization and Computer Graphics, 6(1):24–43, 2000.

[6] D. Holten. Hierarchical edge bundles: Visualization of adjacency relations in hierarchical data. IEEE Transactions on Visualization and Computer Graphics, 12(5):741–748, 2006. (Information Visualization 2006 Conference Proceedings).