1. Mao Lin Huang ( 黃茂林 ) University of Technology, Sydney, Information Visualization and Its Applications 信息可视化及其应用

2. 2 Visualization ( ( 可视化 ) Information Visualization ( 信息可视化 ) Scientific Visualization ( 科学计算可视化 ) None Graph Visualization ( 非图论型可视化 ) Graph Visualization ( 图论型可视化 ) Graph G = (V, E)

3. 3 Information Visualization Maps, diagrams, and PERT charts are examples of using visual representations to see things. A good picture is worth ten thousand words. 一个好的图画所能表达的东西胜 过十万个字 Today, computers help people to see and understand abstract data through pictures. Advances in science & technology have allowed people to see old things in new ways. Telescopes, microscopes and oscilloscopes are typical instrument examples. 现代科学技术允许人们用新 的方法来看旧的事物. 例如 天文望远镜, 显微镜 ….

4. 4 The Definition ( 定义 ) Information visualization: the use of interactive visual representations of abstract, non-physically based data to amplify cognition [CMS99]. 信息可视化 : 用可交流的, 视觉表达方式来表达抽象的, 非物理的 数据从而增强对数据的认识. [CMS99]Stuart K. Card, Jock D. Mackinlay, and Ben Shneiderman. Readings in information visualization: using vision to think. Morgan Kaufmann Publishers, Inc., 1999. Xerox Palo Alto Research Center (PARC)

5. 5 Information Visualization The little image dots represent data records of the number of sun spots, from 1850 to 1993, zoomed in on a small area. (collected from GVU Center, Georgia I. T.) An example of using SeeNet to view email data volumes generated by AT&T long distance network traffic. Edges represent email connections. Weigh and colors of edges represent volumes of email data. Graphics-driven & Graph-driven None-relational data & Relational data

6. 6 Graph-Driven Visualization of Relational Data An example of visualizing relational data. This is the visualization of a family tree (graph). Here each image node represents a person and the edges represent relationships among these people in a large family. Graph Visualization

7. 7 The Model of the Relational Data 关联数据模型 Relational information (graph) visualization systems use graphs G = (V, E) to model relational structures: the entities are nodes, and the relationships are edges (sometimes called links). For example, the structure of the World Wide Web can be modeled as a graph: the nodes are HTML documents, and a hyperlink from one document to another is represented as a directed edge.

8. 8 Challenges in GV Graph layout Problem Scale Problem Scope Problem Navigation Problem Readability, cognitive effort comprehension Readability, cognitive effort comprehension Small window, large data sets Context display Small window, large data sets Context display Distributed huge data sets, which are partially unknown Distributed huge data sets, which are partially unknown How to find particular data items by visual manipulation? How to find particular data items by visual manipulation?

9. 9 Classical Graph Layouts Link-node diagrams Layout algorithms (graph drawing) Geometric positioning of nodes & edges Small amount of nodes Avoid node overlaps Reduce edge crossings hierarchical force-directed orthogonal symmetric radial layout

10. 10 The Graph Drawing ( 画图 ) A graph drawn using the original spring algorithm. 一个用弾璜算法来画的图. A drawing D(G) of a graph G = (V, E) consists of a location (x, y) for each v in V and a route ((x 1,y 1 ), (x 2, y 2 )) for each edge e in E. 一个 “ 图画 ” 是一个 “ 图 ” 的几 何表达方式.

11. 11 Classical Tree Layouts A special type of graphs With no circles Structured hierarchically Inefficient use of display space Small amount of nodes Classical hierarchical layouthyperbolic tree radial layout balloon layout radial layout

12. 12 Space-Optimized Tree Layout Redefine the wedge (v) Redefine the wedge (v) Efficient use of display space Connection+enclosure Large amount of nodes How to navigate? ( Distortion, Zooming+Filtering context+detail) A large data set of approximately 50 000 nodes My Unix root with approx. 3700 directories and files (We introduced this new method in 2001)

13. 13 Redefine the wedge(v) of radial drawingswedge(v) radial drawings - -A region P( ) of a node is defined by the wedge wg(v) and one (or more) cutting edges (boundaries) cut by other regions that cross the line l in wg(v). - -A wedge is defined as wg( ) = { , l,  ( )}, where  is the father of and l is a straight line going through  that determines two boundaries of P( ).

14. 14 The Problem of Viewing Large Data 大型数据可视化的问题 Traditional graph visualization assumes that the whole graph can reasonably be represented in a readable and understandable manner on the display medium. Amount of information we want to visualize becomes larger A small modern file system (say with a 2GB drive on a PC) there are hundreds of nodes and links Web graphs are much larger; even a small organization such as a University has many thousands of web documents. No techniques can visualize the complete World Wide Web. Classical visualization methods tend to be inadequate.

15. 15 Clustered Layout (nodes grouping) Connection + Enclosure

16. 16 Clustered Layout High scalability Dynamic viewing Abridged context Open & close clusters Average readability

17. 17 Force-Directed Clustering (DA-TU) (we introduced this method in 2002 and it’s the first attempt of using force-directed method to draw clustered graphs) Multi-level clustering Multiple spring forces High scalability Dynamic viewing Abridged context Open & close clusters Good readability

18. 18 Multi-Forces in Clustered Graphs

19. 19 The Online Graph Model 在线图模型 Proposed in 1997 Scope problem is well addressed Scalability is increased through dynamic viewing Lost overall context Change frames Animation preserves “mental map” Modified Spring Algorithm

20. 20 We proposed OFDAV in 1997 that provides a major departure from traditional methods. We visualise a tiny part (a “frame” F i ) of a huge graph at time t. We change from F i to F i +1 by user interaction. Online Navigational Visualization (Online Force-Directed Animated Visualization)

21. 21 Online Navigational Visualisation 在线导航型可视化 OFDAV provides a major departure from traditional methods. We visualise a tiny part (a “frame” F i ) of a huge graph at time t. We change from F i to F i +1 by user interaction. OFDAV does not need to know the whole graph, it does not predefine the geometry (the user can navigate logically), and it is user-oriented.

22. 22 We incrementally calculate and maintain a small local visualization on-line. The graph is supplied to the system by a series of requests for neighbourhoods of focus nodes. Huge graph new focus node v neighbourhood of v Small local graph Scope Problem is Addressed

23. 23 The specific criteria for online drawing: The layout of logical frame must show the direction of the exploration. Reduce the overlaps among the local regions. The sequence of drawing preserves the mental map. The general criteria for graph drawing: Reduce the edge crossings. Avoid nodes overlaps Online Graph Layout Problem

24. 24 In the spring model, each node is replaced by a steel ring, and edges are replaced by Hookes’s law springs ( 胡克定理 ). The rings have a gravitational repulsion ( 反向万有引力定理 ) acting between them, and we can find a drawing which minimizes the energy. Spring model ( 弹鐄模型 )

25. 25 In this frame, there are two focus nodes, x and y. The total force on node v is: Modified Spring Algorithm (MSA)

26. 26 The layout of F i must show the direction of the exploration. Spring model Modified spring model

27. 27 Application1:Visual Web browser WebOFDAV - mapping the entire Web, Look at the whole of WWW as one graph; a huge and partially unknown graph. Maintain and display a subset of this huge graph incrementally. Reduce mouse-click rate Maintain a 2D map & history of navigation

28. 28 The “lost in hyperspace” problem 迷失在超空间 Even in this small document, which could be read in one hour, users experienced the ‘lost in hyperspace’ phenomenon as exemplified by the following user comment: ‘ I soon realized that if I did not read something when I stumbled across it, then I would not be able to find it later.’ Of the respondents, 56% agreed fully or partly with the statement, ‘When reading the report, I was often confused about where I was.’ [Nielson, 1990].

29. 29 Visual Web Browser addresses the problem of “lost in hyperspace” with a sense of “space”. Graphic Web Browser addresses the fundamental problem of “lost in hyperspace” by displaying a sequence of logical visual frames with a graphic “history tail” to track the user’s current location and keep records of his previous locations in the huge information space. The logical neighborhood of the focus nodes indicates the current location of the user, and the tail of history indicates the path of the past locations during the navigation.

30. 30 Application2: File Management and Site Mapping An example of using Space-Optimized Tree Visualization for a small web site mapping (approximately 80 pages) - viewing techniques needed Mapping to a Unix root with approx. 3700 directories and files

31. 31 Application3: Web Reverse Engineering HWIT (Human Web Interface Tool) is able to reuse existing structures of web site by visualizing and modifying the corresponding web graphs, and then re-generating a new site by save the modified web graphs. The layout of an existing structure of a web site Enhancing the existing Web site by adding a sub-site

32. 32 Application4: B2C e-Commerce VOS (Visual Online Shop) can be used for online grocery shopping, shopping cart model. It is applicable to any e-commerce shopping application (dynamically navigate e-catalogs).

33. 33 Application5: Online Business Process Management WbIVC (Web-based Interactive Visual Component) is applied to a research project management system (RPMS) in universities. A participant can review the details of a specific process element by clicking on the corresponding rectangle, and then selecting the “ open a process element ” in the popup menu. A participant can also create a new artifact (a Java methods) to a research project by opening a edit window. The output interface of the WbIVC in RPMS The input interface of the WbIVC in RPMS

34. 34 Application6: Program Understanding and Software Mining JavaMiner is for non-linear visual browsing of huge java code for programming understanding. textual data mining Visualize a variety of relationships between terms in Java code, e.g. HAS, SUBCLASS, CALL and INTERFACE relationships. Text documents, the lexicon, the neighborhood function The input interface of the WbIVC in RPMS

35. 35 Conclusion The above talk gives an introduction to Information Visualization and covers most of research works I have done in this field. In the future, I will remain doing research across these three layers because I believe that to guarantee the quality of the research, it needs theory but to assess the value of the research, it needs applications. Thank You !