Mao Lin Huang (黃茂林 )University of Technology, Sydney,
Information Visualization and Its Applications 信息可视化及其应用
2
Visualization Visualization (( 可视化 )
Information Visualization( 信息可视化 )
Scientific Visualization( 科学计算可视化 )
None Graph Visualization( 非图论型可视化 )
Graph Visualization( 图论型可视化 )
Graph G = (V, E)
3
Information VisualizationInformation Visualization
Maps, diagrams, and PERT charts Maps, diagrams, and PERT charts are examples of using visual are examples of using visual representations to see things. representations to see things. A A good picture is worth ten thousand good picture is worth ten thousand words. words.
一个好的图画所能表达的东西胜一个好的图画所能表达的东西胜过十万个字过十万个字Today, computers help people to Today, computers help people to see and understand abstract data see and understand abstract data through pictures.through pictures.
Advances in science & Advances in science & technology have allowed technology have allowed people to people to see old things in new see old things in new ways.ways. Telescopes, microscopes Telescopes, microscopes and oscilloscopes are typical and oscilloscopes are typical instrument examples.instrument examples.
现代科学技术允许人们用新现代科学技术允许人们用新的方法来看旧的事物的方法来看旧的事物 . . 例如例如天文望远镜天文望远镜 , , 显微镜 …显微镜 … ..
4
The Definition (The Definition ( 定义定义 ))
Information visualization: the use of interactive visual Information visualization: the use of interactive visual representations of abstract, non-physically based data to representations of abstract, non-physically based data to amplify cognition [CMS99].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
Information VisualizationInformation 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
Graph-Driven Visualization of Relational DataGraph-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 VisualizationGraph Visualization
7
The Model of the Relational DataThe 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
Challenges in GV
Graph layout Problem Scale Problem Scope Problem Navigation Problem
Readability, cognitive effort comprehension
Small window, large data setsContext display
Distributed huge data sets, which are partially unknown How to find particular data
items by visual manipulation?
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
The Graph Drawing (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 ((x1,y1), (x2, y2)) for each edge e in E.
一个“图画”是一个“图”的几何表达方式 .
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 layout hyperbolic tree
radial layout
balloon layout
radial layout
12
Space-Optimized Tree Layout 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
Redefine the wedge(v) of 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
The Problem of Viewing Large DataThe 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
Clustered Layout (nodes grouping)
Connection + Enclosure
16
Clustered Layout High scalability Dynamic viewing Abridged context Open & close clusters Average readability
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
Multi-Forces in Clustered Graphs
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
We proposed OFDAV in 1997 that provides a major departure from traditional methods. We visualise a tiny part (a “frame” Fi ) of a huge graph at time t. We change from Fi to Fi+1 by user interaction.
Online Navigational Visualization(Online Force-Directed Animated Visualization)
21
Online Navigational VisualisationOnline Navigational Visualisation在线导航型可视化在线导航型可视化OFDAV provides a major departure from traditional methods. We visualise a tiny part (a “frame” Fi ) of a huge graph at time t. We change from Fi to Fi+1 by user interaction.
OFDAV does notneed to know the whole graph, it does not predefine the geometry (the user can navigate logically), and it is user-oriented.
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.
Hugegraph
new focus node v
neighbourhood of v
Small local graph
Scope Problem is Addressed
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
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 (Spring model ( 弹鐄模型弹鐄模型))
25
In this frame, there are two focus nodes, x and y. The total force on node v is:
},{},,4,...,1{
)(yxu
uv
yxu
uvxv hgfvf
Modified Spring Algorithm (MSA)
26
The layout of The layout of FFii must show the direction must show the direction of the exploration.of the exploration.
Spring model Modified spring model
27
Application1:Application1:Visual Web browserVisual 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
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
Visual Web Browser addresses the problem of Visual Web Browser addresses the problem of “lost in hyperspace” with a sense of “space”.“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
Application2:Application2:File ManagementFile Managementand Site Mappingand Site Mapping
An example of using Space-Optimized Tree Visualization for a small web site mapping (approximately 80 pages)- viewing techniques neededMapping to a Unix root with
approx. 3700 directories and files
31
Application3: Application3: Web Reverse EngineeringWeb 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
Application4: Application4: B2C e-CommerceB2C 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
Application5: Application5: Online Business Online Business Process ManagementProcess 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
Application6: Application6: Program UnderstandingProgram Understandingand Software Miningand 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
Conclusion 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 !Thank You !