Methods and tools for synchronized visualization of evolving networks

(1)

METHODS AND TOOLS FOR

SYNCHRONIZED VISUALIZATION OF

EVOLVING NETWORKS

a thesis submitted to

the graduate school of engineering and science

of bilkent university

in partial fulfillment of the requirements for

the degree of

master of science

in

computer engineering

By

Ilkin Safarli

July 2018

(2)

METHODS AND TOOLS FOR SYNCHRONIZED VISUALIZATION OF EVOLVING NETWORKS

By Ilkin Safarli July 2018

We certify that we have read this thesis and that in our opinion it is fully adequate, in scope and in quality, as a thesis for the degree of Master of Science.

Uğur Doğrusöz (Advisor)

Fazlı Can

İsmail Hakkı Toroslu

Approved for the Graduate School of Engineering and Science:

Ezhan Karaşan

(3)

ABSTRACT

METHODS AND TOOLS FOR SYNCHRONIZED

VISUALIZATION OF EVOLVING NETWORKS

Ilkin Safarli

M.S. in Computer Engineering Advisor: Uğur Doğrusöz

July 2018

Graph visualization is a powerful tool to convey and analyze relational infor-mation in the form of networks such as biological networks, social networks, and computer networks. Abundant research has been conducted on the automatic lay-out of static graphs and numerous tools have been developed to visualize them. However, in many applications, graphs are not static; they change or evolve over time. To void this gap, we designed two new dynamic graph layout methods, im-plemented a dynamic graph layout library and developed a web-based application to visualize and contrast dynamic graphs effectively.

Cytoscape.js-synched is a library that implements three different dynamic graph layout algorithms, two of which are proposed by us. In the layout of dynamic graphs, the main criteria is to keep the mental map and minimize the total distance among different versions of the same graphs. It is also important to minimize general layout metrics such as node to node overlaps, number of edge crossing, total area, and total edge length. Proposed and implemented algo-rithms address both of these conflicting criteria to a satisfactory level and result in aesthetically pleasing layouts.

EVEN, which is based on Cytoscape.js graph library, is a highly customizable, open source, web-based, and interactive application for visualization of dynamic graphs. It supports visualization and automatic synchronized layout of two or more dynamic graphs. EVEN makes analysis of dynamic graphs more practical by providing synchronized graph exploration features. It also has basic support for constructing and editing dynamic graph.

Keywords: Graph visualization, dynamic graphs, evolving networks, graph draw-ing, layout algorithms, interactive visualization software.

(4)

ÖZET

EVRİMLEŞEN AĞLARIN SENKRONİZE

GÖRSELLEŞTİRİLMESİ İÇİN YÖNTEMLER VE

ARAÇLAR

Ilkin Safarli

Bilgisayar Mühendisliği, Yüksek Lisans Tez Danışmanı: Uğur Doğrusöz

Temmuz 2018

Çizge görselleştirme, biyolojik ağlar, sosyal ağlar ve bilgisayar ağları ilişkisel biçi-mindeki bilgileri iletmek ve analiz etmek için güçlü bir araçtır. Statik çizgelerin otomatik yerleştirilmesi üzerinde bol miktarda araştırma yapılmış ve bunları görselleştirmek için çok sayıda araç geliştirilmiştir. Ancak, birçok uygulamada, çizgeler statik değildir; zamanla değişmekte ve ya gelişmektedir. Bu boşluğu gi-dermek için iki yeni dinamik çizge yerleştirme yöntemi tasarladık, dinamik bir çizge yerleştirme kütüphanesi uyguladık ve dinamik çizgeleri etkili bir şekilde görselleştirmek ve karşılaştırmak için web tabanlı bir uygulama geliştirdik.

Cytoscape.js-synched, ikisi bizim tarafımızdan önerilen üç farklı dinamik çizge yerleştirme algoritması gerçekleştiren bir yazılım kütüphanesidir. Dinamik çizgelerin düzeninde, ana kriter, zihinsel haritayı korumak ve aynı çizgenin farklı versiyonlarının yerleşimi arasındaki farkları en aza indirmektir. Düğüm düğüm örtüşmeleri, kenar kenar kesişim sayısı, toplam alan ve toplam kenar uzunluğu gibi genel yerleşim ölçütlerini en aza indirmek de önemlidir. Önerilen ve uygu-lanan algoritmalar, bu çelişen kriterlerin her ikisini de tatmin edici bir seviyede karşılamakta ve estetik olarak tatmin edici sonuçlar vermektedir.

Cytoscape.js çizge yazılım kütüphanesi üzerine kurulan EVEN, dinamik çizgelerin görselleştirilmesi için oldukça özelleştirilebilir, açık kaynaklı, web ta-banlı ve etkileşimli bir uygulamadır. İki veya daha fazla dinamik çizgenin görselleştirmesini ve otomatik senkronizasyon düzenini destekler. EVEN, senkro-nize çizge keşif özellikleri sağlayarak dinamik çizgelerin analizini daha pratik hale getirir. Aynı zamanda dinamik çizge oluşturmak ve düzenlemek için temel desteğe sahiptir.

(5)

v

Anahtar sözcükler : Çizge görselleştirme, dinamik çizgeler, evrimleşen ağlar, çizge yerleştirme, yerleştirme algoritmaları, etkileşimli görselleme yazılımı.

(6)

Acknowledgement

I would like to express my gratitude to my supervisor Prof. Uğur Doğrusöz for his support, guidance and patience during my master’s studies.

Furthermore, I would like to thank the members of thesis committee Prof. Fazlı Can and Prof. İsmail Hakkı Toroslu for their time, guidance and valuable feedback.

(7)

List of Figures

1.1 Graph representation of an anonymized social network . . . 2

2.1 Visualuzaion of static graphs in different formats . . . 6

2.2 Dynamic graph represented as juxtaposition . . . 7

2.3 Dynamic graph represented as superposition . . . 8

2.4 Examples of results of different layout algorithms . . . 10

3.1 A dynamic graph laid out with merged layout method . . . 15

3.2 A dynamic graph laid out with Foresighted layout algorithm . . . 16

3.3 Screenshot of the user interface of GraphAEL . . . 17

3.4 Screenshot of the user interface of Visone . . . 18

3.5 Screenshot of the user interface of Gevol . . . 19

4.1 A dynamic graph with two sequences laid out with InterLayed layout 25 4.2 A dynamic graph with two sequences laid out with InterLayed layout 26 4.3 An example graph where long edges may be produced . . . 27

(12)

LIST OF FIGURES xii

4.4 A dynamic graph with two sequences laid out with Extended In-terLayed layout . . . 31

4.5 A dynamic graph with two sequences laid out with Extended In-terLayed layout . . . 32

5.1 The main user interface of EVEN . . . 40

(13)

List of Tables

5.1 Description of menu items in EVEN . . . 41

6.1 Evaluation results . . . 44

A.1 Evaluation results after removing 10 edges and nodes from the base graph randomly . . . 54

(14)

Chapter 1 Introduction

Information visualization is a scientific field that studies the visualization of nu-merical and textual data. Visualization makes it easier to analyze, understand and drive conclusion from the data. Information visualization is applicable to a variety of areas and it is widely used. Example applications include scientific research, business intelligence, security and cybersecurity intelligence, marketing analysis, and fraud detection.

Different types of data can be visualized using a variety of information visual-ization techniques, such as charts, maps, and dendograms. Graphs are represen-tations best suited for visualization of relational information. With graphs, the entities in the dataset are represented by nodes and the relations are represented by edges. Figure 1.1 is a representation of an anonymized social network, where vertices denote the users and the edges represent friendship.

Graphs can be used to visualize many types of relational data, including social network data, biological network data, dependency networks, IT infrastructure and routes. Graph representation of relational data also allows us to run a range of queries (such as neighborhood, shortest path, and minimum spanning tree) on the dataset.

(15)

961 910 824 212 313 758 773 860 347 614 295 124 319 115 278 734 549 473 316 501 797 104 104 104

Figure 1.1: Graph representation of an anonymized social network

in a reasonable running time complexity is a major challenge. The design of automated graph layout algorithms is a well studied problem [1] and there are many efficient algorithms which produce good layouts. There are also many tools for visualizing, editing and automatically layouting graphs.

1.1 Motivation

While the visualization and automatic layout of static graphs is a well established field, work on automated layout of dynamic graphs – graphs that are changing or have changed over time is relatively immature [1]. A good dynamic layout should minimize the change between locations of common nodes, maintain rela-tive ordering of nodes among different versions of the graph and at the same time should meet the criteria of good static layout. Those criteria include minimizing number of node to node overlaps, number of edge crossing, total area, and total edge length [2]. Few algorithms exist for automatic layout of dynamic graphs, but they all have their drawbacks. Some of them do not address both of these conflicting criteria to a satisfactory level, and some of them are domain specific. There is a need for the development of new general dynamic graph layout al-gorithms which meet both of these criteria, produce aesthetically good looking layouts and have a reasonable running time complexity.

(16)

Moreover, there does not exist an open source tool for visualizing and editing dynamic graphs using modern technologies. All existing dynamic graph systems have an outdated user interface, typically do not have support for cross-platforms, and are not customizable. Most of them do not have basic editing features, and do not support synchronous graph exploration. A modern tool with the stated features is necessary for effective visualization of dynamic graphs.

1.2 Contribution

To address the issues discussed in Section 1.1, we present two new methods for automatic layout of dynamic graphs, a dynamic graph layout library which im-plements these new methods and an existing method, and a tool for visualizing, editing and doing automatic layout of dynamic graphs.

Cytoscape.js-synched is an open source Cytoscape.js based library which im-plements three different algorithms for automated layout of dynamic graphs. The algorithms have a reasonable running time complexity and the evaluations show that they produce aesthetically good looking results. In order to eval-uate the quality of those algorithms, alongside Cytoscape.js-synched, another library called Cytoscape.js-layvo has been developed. Given the layout of one or more graphs, this library calculates metrics which are specific to static and dynamic layouts. Cytoscape.js-layvo library is not specific to or dependent on Cytoscape.js-synched library, and can be used to evaluate the performance of any layout algorithm present in Cytoscape.js library.

EVEN is a tool for visualizing, editing and analyzing dynamic networks. It is a highly customizable, open source, web-based, interactive application which is based on Cytoscape.js core and its extensions. EVEN makes the analysis of dynamic graphs more practical by providing synchronized graph exploration features such as synchronous zooming, synchronous panning, synchronous moving and real time neighbor highlighting. It also has basic support for constructing and editing dynamic graph.

(17)

Chapter 2 Background

This chapter summarizes the background information about graphs, graph visu-alization, and the automated layout of graphs.

2.1 Graphs

2.1.1 Basics and Definitions

A graph G = (E, V ) consists of a set of edges E, which connect pairs of vertices in a set of vertices V . An edge e ∈ E is said to be undirected if and only if e1 = (u, v) and e2 = (v, u) represent the same relationship. If e1 = (u, v) and

e2 = (v, u) represent different relationships, then the graph is considered directed.

In graphs, the edges can be associated with a weight where w(e) represents the weight of the edge e ∈ E. Two vertices u and v are said to be adjacent if there exists an edge such that e = (u, v).

A graph is said to be connected, if all other vertices are accessible from vertex v. If a graph is not connected, then it is considered disconnected.

(18)

In graphs, the number of edges and vertices are represented by |E| and |V | respectively. The degree of a vertex v is the number of edges connected to that vertex and is denoted by deg(v).

Based on the nature of the graphs there are two types of them – static graphs and dynamic graphs.

• Static graphs: static graphs consist of a fixed number of vertices and edges, and they are represented as G = (E, V ). The number of edges and nodes do not change over time.

• Dynamic graphs: unlike static graphs, in dynamic graphs, the number of vertices and edges can change over time. Different vertices and edges can be added and removed in different time slots. Dynamic graphs are represented by a sequence of static graphs Γ = (G1, G2, . . . , Gk) where Gi = (Ei, Vi) is

a static graph at time slot ti [3]. They are sometimes referred as evolving

graphs or evolving networks.

2.2 Graph Visualization

Graphs are one of the most important abstract data structures in computer sci-ence. They are very useful for storing and representing any type of relational data such as flow networks, social networks, computer networks, and biological networks. However, as networks get bigger without proper visualization it is not possible to analyze the underlying data and understand the relationship. There-fore, tools and techniques for effective visualization of graphs is a necessity for analyzing big network data.

(19)

2.2.1 Visual Representations of Graphs

A variety of techniques exist for visual representation of static and dynamic graphs. These techniques are discussed in the following subsections.

2.2.1.1 Static Graphs

One technique for visualizing graphs is to use adjacency matrix. In adjacency matrix vertices are mapped to the rows and columns of the matrix. If there is an edge between vertex u and v, then the corresponding cell is either colored or its value is set to one or the weight of the edge (Figure 2.1(a)).

Another technique that is widely used in the representation of graphs is node-link approach. In node-link approach, vertices are represented by geometric shapes and the edges are drawn as lines (Figure 2.1(b)). This approach allows us to customize a lot of visual properties of the graphs such as fill color, line colors, vertex and edge shapes.

a

b

c

d

e

a

b

c

d

e

(a) Graph represented as adjacency matrix a c e b d

(b) Graph represented as node-link

(20)

2.2.1.2 Dynamic Graphs

Two main methods exist for visualization of dynamic graphs: animation and timeline. In animation technique, the sequences in dynamic graph are assigned to timestamps in the animation. As a result an animation of the graph is created by transitioning from one graph to the next smoothly [3, 4, 5]. In this technique the sequences in the dynamic graphs are usually represented as node-link diagrams.

In the timeline technique, all sequences in the dynamic graph are drawn onto a timeline. The sequences in the dynamic graph are usually represented in node-link format. There are two main methods for positioning the sequences in the dynamic graph onto the timeline [5, 4]. The first one is juxtaposition, where the sequences are placed side by side and the positions of the vertices are arranged such that the position of a vertex is the same in all sequences. A sample dynamic graph which is represented as juxtaposition is given in Figure 2.2.

timeline t = 1 t = 2 t = 3 a b c a b c a c

Figure 2.2: Dynamic graph represented as juxtaposition

The other method is called superposition. In this approach, the sequences are placed on top of each other in 2D space in such a way that the positions of nodes in different sequences remain the same. The sequences can also be placed in 3D space where the z-axis represents the timeline [3]. A sample dynamic graph which is represented as superposition is given in Figure 2.3.

Another technique that is used for visualizing dynamic graphs is called explicit encoding. The explicit encoding is usually used to compute the relationships

(21)

timeline a c b a c a c b b

Figure 2.3: Dynamic graph represented as superposition

between the sequences of graphs, such as intersection and union [4]. After the operation is evaluated, the result is shown as a single graph in a node-link format.

2.3 Graph Layout

In graph visualization, graph layout is one of the most important concepts. With-out proper layWith-out, it is not possible to analyze and understand the underlying graph, especially with big networks. Drawing graphs manually by hand is a daunting task, which requires a lot of effort. In order to tackle this problem, many automated layout algorithms have been developed.

2.3.1 Metrics for Evaluation of Layout Algorithms

Graph drawing algorithms are evaluated based on two main criteria: the running time complexity and the aesthetic quality of the produced layout.

The calculation of running time complexity is straightforward. It is the running time complexity of underlying algorithm and usually reported for average and worst cases as a function of the number of edges and vertices. Since the graph visualization and analysis is usually done in an interactive environment, it is

(22)

preferred to have an algorithm that runs in real-time and scales well with the number of edges and vertices.

In static graphs, goodness of graph layout algorithms depends on the following metrics: number of node to node overlaps, number of edge crossing, total area and total edge length [2]. The aim is to minimize these conflicting metrics. There is obviously a trade-off between the running time complexity and the goodness of the result of layout algorithms. Algorithms that produce better results tend to run slower.

All of the metrics for static graphs also apply to dynamic graphs. Furthermore, in the evaluation of goodness of dynamic graph layout algorithms, the preserva-tion of mental map is a very important metric. The mental map refers to the structural cognitive information that is created in the mind when the user ob-serves the layout [6, 7]. Preservation of the mental map helps the user keep the track of changes in the graph and makes the comparison of subsequent graphs much easier.

In the evaluation of dynamic graph layouts, the total distance between common nodes of subsequent graphs is one of the main factors that affects the preservation of mental map. Minimizing this distance facilitates the preservation of mental map and maximizes dynamic graph stability [3]. Another metric that plays an important role in maintaining the mental map of user is the preservation of or-thogonal ordering [8, 9].

In addition to the numerical evaluations, empirical evaluations are also used to assess the goodness of layout algorithms [10, 7]. In such evaluations, users are asked to complete a few tasks related to the graph. Their response time is recorded, smaller response time means better layout algorithm. Aesthetic look of the result of layout algorithm is also important in empirical evaluations.

(23)

2.3.2 Layout of Static Graphs

The layout of static graphs is a well studied problem [1] and there are many al-gorithms that do automated layout of static graphs. Depending on the structure of the underlying data and the particular domain, different types of layout meth-ods, such as force-based layout algorithms, circular layout algorithms, orthogonal layout algorithms, hierarchical layout algorithms have been developed. Examples of the results of different layout algorithms are shown in Figure 2.4.

(a) Force-based layout (b) Circular layout

(c) Orthogonal layout (d) Hierarchical layout

Figure 2.4: Examples of results of different layout algorithms

There are also modified versions of those algorithms which are designed for specific types of graphs such as directed, weighted and compound graphs. There does not exist a universal layout algorithm which produces good results for all types of graphs but force-based layout algorithms seem to work for most appli-cations.

(24)

2.3.2.1 CoSE Layout Algorithm

Compound Spring Embedder (CoSE) is a static graph layout algorithm which is based on the traditional force-directed layout scheme and it handles compound nodes, arbitrary node sizes, and inter-graph edges [11]. CoSE also has support for incremental layout which helps to preserve the mental map of the user.

CoSE extends the force-directed layout algorithm developed by Fruchterman and Reingold. In CoSE, the nodes are represented by positively charged parti-cles and the edges are represented by springs. The spring force is considered as attractive force and it is calculated as follows:

Fs =

(λ − kpu− pvk)2

η

−−→ pupv

λ is the ideal edge length, η is the elasticity constant of the edge, and pu and pv

are positions of nodes u and v, respectively.

The electrical forces among positively charged particles represent the repulsive forces and are calculated by using the following formula

Fr =

α kpu− pvk2

−−→ pupv

where α is the repulsion constant.

In CoSE, the compound nodes are treated like a single object and modeled as elastic cart [11]. The size of the compound nodes is the bounding box of its children and they can move only in orthogonal directions. During the layout, the forces among the parent node and its children are ignored for simplicity and efficiency.

Experimental results show that the layouts produced by CoSE algorithm are quite satisfactory with respect to commonly accepted static layout criteria [11]. The worst case running time complexity of CoSE layout algorithm is O(|E|+|V |3). The complexity can be reduced to O(|E| + |V |2_{) by using FR-grid variant, which}

eliminates the calculations of repulsion forces for certain pairs of nodes. The runtime of the algorithm can be further improved by using multilevel scaling and GPU parallelism [12].

(25)

2.3.3 Layout of Dynamic Graphs

Compared to the problem of static graph layout, the problem of layout of dynamic graphs is relatively immature [1]. The algorithms that are used to layout dynamic graphs are usually modifications of the algorithms that are used to layout static graphs. The modifications are usually done in a way such that the mental map is maintained between subsequent graphs in the timeline and the dynamic stability is maximized. Layout of dynamic graphs itself can be divided into two categories: layout of online graphs and the layout of offline graphs.

In the layout of online graphs, the sequences until time ti is known and the

rest in not known. For online layout, one common technique is to start from the layout of initial sequence and create the layout of following sequences based on it [13].

Unlike online graphs, in offline graphs, all graph sequences in the dynamic graph Γ are known before the layout is started. Since all sequences are known, better optimization of the layout and preservation of the mental map is possi-ble. In offline layout, usually a global layout is calculated by using all of the sequences [13]. The layout of each sequence is driven from the global layout.

(26)

Chapter 3 Related Methods, Tools and

Libraries

In this chapter, the related work on dynamic graph layout algorithms and previ-ously developed dynamic graph visualization tools are discussed.

3.1 Related Methods

As discussed in Section 2.3.3, the layout of dynamic graphs is divided into two categories: the layout of online and the layout of offline dynamic graphs. Differ-ent algorithms have been developed to address the problem of automatic layout of dynamic graphs. Related work on the automatic layout of online and offline dynamic graphs are given in the following subsections.

3.1.1 Related Methods for Online Dynamic Graphs

One of the early methods that addresses the problem of automatic layout of online dynamic graphs is proposed by Misue et al [8]. They introduce the first

(27)

layout adaptation approach for general graphs, which addresses the problem of layout after interactive graph editing [3]. Misue et al. propose a force-directed algorithm similar to spring embedder algorithms, which preserves the mental map by maintaining the horizontal and orthogonal ordering of the nodes.

Another algorithm that does automatic layout of online dynamic graphs is proposed by Lee et al [14]. They describe the layout of dynamic graphs as an optimization problem, where different weights are assigned to each layout crite-ria [3]. The aim of the optimization is to get a layout which preserves the mental map among sequences of the dynamic graph. They use simulated annealing to find a satisfactory solution to the layout optimization problem.

Frishman and Tal propose another method for dynamic graph drawing, which is based on the preservation of the mental map [15]. The initial layout of the first graph is calculated in an efficient way by using multilevel force-directed scheme. A modified version of basic force-directed algorithm, which is incremental and preserves the mental map, is used to calculate the layout of the following graphs.

Saffrey and Purchase present another algorithm, which is based on the spring embedder algorithm with the principle of mental map preservation [1]. After the first sequence is laid out with the spring embedder algorithm, for the remaining sequences, while applying the spring embedder algorithm the movement of the nodes are restricted either by proportion or by geometric distance which preserves the mental map.

3.1.2 Related Methods for Offline Dynamic Graphs

One simple way to layout offline dynamic graphs it to create a super-graph by aggregating all the sequences in the graph and apply a layout to it. Then the layout of each graph in the sequence is driven from the layout of that super-graph [3]. A different version of this approach is proposed by Erten et al [16]. They create the aggregated graph from the sequences in the graph and assign weights to the nodes and edges. The weight of a node (edge) is the number

(28)

Figure 3.1: A dynamic graph laid out with merged layout method [16]

of times that node (edge) appears in the dynamic graph. After the weights are assigned, a modified version of force-directed algorithm is applied to the aggregated graph and the individual layouts are driven from that layout.

Another method proposed by Erten et al. is the following [16]. Initially, all of the graphs are merged together and a merged graph is created. Unlike aggregated graphs, in merged graph approach a node (edge) appears k times in the graph where k is the number of times that node (edge) appears in dynamic graph. Additional edges are added to connect the same vertices in all graph sequences. After that a modified version of force-directed algorithm is applied to the merge graph.

In the third algorithm proposed by Erten et al. after the initial layout of two graphs G1 and G2 are calculated, in subsequent iterations the placement of nodes

from G1is used to apply incremental layout to G2 and vice versa [16]. The process

is repeated until the two layouts converge or the maximum number of iterations is reached.

(29)

Figure 3.2: A dynamic graph laid out with Foresighted layout algorithm [17]

Another algorithm that is designed to layout dynamic graphs is Foresighted layout algorithm [17]. Foresighted layout algorithm creates a super-graph of the sequences in the graph. While creating the super-graph if nodes and edges do not have the same live-time, they are grouped together. This decreases the number of nodes and edges in the super-graph which in turn creates a more compact global layout. The Foresighted layout algorithm is further extended to Foresighted layout with tolerance in which the individual layouts driven from the global layout are allowed to deviate to a certain degree [6, 3].

3.2 Related Tools

Along the development of automatic dynamic graph layout algorithms, tools that visualize dynamic graphs have been developed. The following subsections provide more information about these tools.

(30)

3.2.1 GraphAEL

GraphAEL is a graph visualization system that can create 2D or 3D animations of the given dynamic graph [18]. The system consists of three main components: a database which is used to store the underlying graph data, a graphical user in-terface which allows the user to query the database and a toolkit which visualizes the results of the queries.

Figure 3.3: Screenshot of the user interface of GraphAEL [18]

3.2.2 Visone

Visone is another visualization tool that is mainly tailored for the visualization, exploration, and analysis of social networks [19]. Beside static graph visualization, it also has support for visualization and automatic layout of dynamic networks.

(31)

Figure 3.4: Screenshot of the user interface of Visone [19]

3.2.3 Gevol

Gevol is a system specially built for the visualization of evaluation of software [20]. It extracts the information from a centralized version control system and displays it by using a temporal graph visualizer. By using this information, programmers can understand the evolution of the program better.

3.2.4 GDG

GDG is another interactive dynamic graph drawing system, which includes several algorithms for automated layout of dynamic graphs [1]. The algorithms are based on the idea of maintaining the mental map and many parameters of them are customizable.

(32)

Figure 3.5: Screenshot of the user interface of Gevol [20]

3.2.5 Dynagraph

Dynagraph is another interactive tool for visualizing dynamic networks [21]. In-cremental layout algorithms are used to adjust the graph after the changes are made to the graph. Using incremental layout algorithms helps to maintain the overall mental map and the model of the graph.

3.2.6 GraphStream

GraphStream is a Java library for visualizing, creating, editing, and analyzing dynamic networks [22]. It also has support for automatic layout of dynamic graphs.

(33)

3.3 Related Libraries

3.3.1 Ctyoscape.js and Extensions

Cytoscape.js is an open source, web-based standalone JavaScript library for anal-ysis and visualization of networks, which does not depend on any other library or browser plugin [23]. It has support for desktop and touch enabled browsers, and since it is a web-based library, there is no problem of cross-platform compatibility.

Cytoscape.js provides a core API that represents the graph and it can be used to run a variety of operations on the graph [23]. Many static layout algorithms such as circular layout, grid layout, concentric layout, and breadth-first layout algorithms are provided as a part of the core API. The core API also includes other well-known graph theory algorithms such as connectivity search, shortest path, minimum spanning tree, minimum cut, ranking and centrality measures [23].

By default, Cytoscape.js provides a few ways for interactive visualization: the viewport can be panned or zoomed, the graph elements can be repositioned and selected or unselected. The interactivity of the Cytoscape.js can be extended by using the event binding feature of the Cytoscape.js library.

Extensions are libraries that are built on top of Cytoscape.js and they ex-tend the features of Cytoscape.js without modifying it directly. For example, a new extension can be built which implements a new layout algorithm or allows interactive resizing of nodes in the graph.

Cytoscape.js has support for headless mode, in which there is no user inter-face [23]. The headless mode is very useful for running Cytoscape.js on server side or to run certain operations in the background without updating the viewport and return the result after the operations complete.

In addition, Cytoscape.js also supports animation – elements in the graph can be animated from one position to another, or the zoom and pan level can be changed with animation. The animation helps to keep the continuity while the

(34)

(35)

Chapter 4 Proposed Methods

In order to layout dynamic graphs, we have developed two new methods. These methods are discussed in the following sections.

4.1 InterLayed Layout

In the aggregated and merged dynamic graph drawing methods described earlier, a super-graph of all the sequences in the graph is created [3, 16]. A global layout of the super-graph is calculated and the layout of each sequence is driven from that global layout. This approach maintains the mental map and works well when the change in the graph over the time is minimal and the sequences in the dynamic graph are very similar. While this approach works well for certain types of dynamic graphs, it has some drawbacks and does not produce an aesthetically good looking layout for other types of graphs. If the change in the graph is major and there are many disconnected components in the super-graph, then the total area of the sequences in the graph increases, yielding some very long edges.

In the proposed InterLayed layout algorithm, first by taking the intersection of all the sequences in the dynamic graph an intersection graph is created (hence the name InterLayed). Then, a static graph layout algorithm is applied to the

(36)

intersection graph and a global layout is created. After that, each sequence is laid out by using a static graph algorithm. While applying the static layout, in order to maintain the mental map among the sequences of dynamic graph, the displacement of nodes which are in the intersection graph is multiplied by a displacement factor δ to restrict their movement. The value of δ is between 0 and 1, expected to be on the lower half, and can be customized by the user.

4.1.1 Computing the Intersection Graph

The intersection graph is created as follows. Let Γ = (G1, G2, . . . , Gk) be a

dynamic graph and I be the intersection graph of Γ:

I = k \ i=1 Gi

4.1.2 Algorithm

After the intersection graph is calculated, the layout of each sequence can be calculated by using this graph’s layout in a combination with a modified static layout algorithm. Any static layout algorithm can be used in the InterLayed layout assuming the following modifications are done. The static layout algorithm should be modified to take extra two parameters – the intersection graph and the displacement factor δ. Before the layout, the initial positons of the nodes that are present in all sequences, are set according to the result of global layout. During layout, if a node is in the intersection graph, its displacement is multiplied by δ.

(37)

The algorithm is formally defined in Algorithm 4.1.

Algorithm 4.1: InterLayed Layout

input : Dynamic graph Γ, displacement factor δ output: Layout of each graph in Γ

// calculate the global layout

intersectionGraph ← computeIntersectionGraph(Γ); globalLayout ← staticLayouter(intersectionGraph); // calculate the layout for each sequence for i ← 1 to k do

setPositionsOfCommonNodes(Gi, globalLayout, intersectionGraph);

layout ← modifiedStaticLayouter(Gi, δ, intersectionGraph);

drawGraph(Gi, layout);

Two example results of InterLayed layout algorithm are given in Figure 4.1 and Figure 4.2.

4.1.3 Running Time Complexity Analysis

In the InterLayed layout, the intersection graph is created in k × (|E| + |V |), where |V | is the number of vertices and |E| is the number of edges in a given graph sequence in the dynamic graph Γ. Then the static graph layout algorithm is called k times, where k is the number of sequences in the dynamic graph Γ. Let R be the running time complexity of the underlying static graph layout algorithm. Hence, the overall running time complexity of the InterLayed layout algorithm becomes O(k × (|E| + |V | + R)).

(38)

Figure 4.1: A dynamic graph with tw o sequences laid out with In terLa y ed la y out

(39)

Figure 4.2: A dynamic graph with tw o sequences laid out with In terLa y ed la y out

(40)

4.2 Extended InterLayed Layout

While the InterLayed layout algorithm produces aesthetically pleasing layouts for most of the times, in some cases long edges are produced or node to node overlaps and edge crossings are unavoidable. One of such cases where long edges are produced is shown in Figure 4.3.

c b

a

e d

(a) Graph at time t1

c b

a

e

(b) Graph at time t2

Figure 4.3: An example graph where long edges may be produced

For the graphs shown in Figure 4.3, in the intersection graph there will be two components and the layout algorithm will try to push them away from each other. This will produce long edges for the graph on the left and overall area will increase.

Another case in which InterLayed layout algorithm may also produce layouts where the mental map is not preserved well is the following: dynamic graphs where there is a significant difference among the sequences. In such cases, the intersection graph is very small compared to the average number of vertices and edges in the graph. Therefore, the global layout of that intersection graph does not represent all of sequences in the dynamic graph well and the layout of in-dividual sequences becomes independent. This in turn disturbs the mental map among the sequences.

In order to address these problems a new layout method, Extended InterLayed Layout algorithm, which is based on the InterLayed Layout algorithm has been

(41)

designed. In the extended version of the algorithm, a new concept extended intersection graph is defined. Extended intersection graph is created by taking the union of one degree neighbors of vertices in the intersection graph.

The algorithm is based on the idea that the final position of a given node is mostly affected by its neighbors. Therefore, including the first degree neighbors in the intersection graph will produce a better global layout. Since the neighbors are already taken into consideration in the global layout, while calculating the layout of each graph sequence, the movement of nodes that are present in all graphs will be minimal and the number of node to node overlaps among the nodes which are in the intersection graph and the other nodes will decrease.

Moreover, it is more likely that the number of components in the extended intersection graph will be lower compared to the number of components in the intersection graph – two disconnected graph components may have a common neighbor and while creating the extended intersection graph they will merge into a single component. This will result in a more compact global layout, which in turn will affect the final layout of each individual graph sequence.

4.2.1 Computing the Extended Intersection Graph

The extended intersection graph is created as follows. Let Γ = (G1, G2, . . . , Gk)

be a dynamic graph, I be the intersection graph of Γ, and Ie be the extended

(42)

shown in Algorithm 4.2.

Algorithm 4.2: Extended Intersection Graph input : Dynamic graph Γ, intersection graph I output: Extended intersection graph

// create the union graph for i ← 1 to k do

unionGraph ← unionGraphS Gi;

// creating the extended intersection graph for v ∈ intersectionGraph do

extendedIntersectionGraph ← neighborhood(v, unionGraph) S extendedIntersectionGraph;

The neighborhood method returns the edges which are connected to the vertex v and the vertices at the other end of these edges – first degree neighborhood of vertex v. Calculation of extended intersection set can be implemented efficiently by using Breadth First Search algorithm.

4.2.2 Algorithm

In the algorithm, first the intersection and extended intersection graphs are calcu-lated. The global layout for the extended intersection graph is created by using a static graph layout algorithm. Before the layout, the initial positons of the nodes that are present in all sequences, are set according to the result of global layout. After that, each sequence in the dynamic graph is laid out by using a modified static layouter which takes two extra parameters, namely the intersection graph and the displacement factor δ. During the layout the placement of nodes which are in the intersection graph are multiplied by the displacement factor. The

(43)

algorithm is formally defined in Algorithm 4.3.

Algorithm 4.3: Extended InterLayed Layout

input : Dynamic graph Γ, displacement factor δ, intersection graph I output: Layout of each graph in Γ

// calculate the global layout

extendedIntersectionGraph ← computeExtendedIntersectionGraph(I); globalLayout ← staticLayouter(extendedIntersectionGraph);

// calculate the layout for each sequence for i ← 1 to k do

setPositionsOfCommonNodes(Gi, globalLayout, intersectionGraph);

layout ← modifiedStaticLayouter(Gi, δ, intersectionGraph);

drawGraph(Gi, layout);

Two example results of InterLayed layout algorithm are given in Figure 4.4 and Figure 4.5.

4.2.3 Running Time Complexity Analysis

In the Extended InterLayed layout, in addition to the operations done in the InterLayed layout, the extended intersection graph is calculated. Let S be the running time complexity of the extended intersection graph algorithm where S is

k X i=1 |Gi| = k X i=1 |Ei| + |Vi|

for the worst case. Then the overall complexity of the Extended InterLayed layout algorithm becomes O(k ×(|E|+|V |+R)+S). Assuming that the number of edges and nodes for all sequences have the same asymptotic complexity as is the case for real-life graphs, the running time complexity becomes O(k × (|E| + |V |)). Hence, the overall complexity of the Extended InterLayed layout algorithm becomes O(k × (|E| + |V | + R)).

(44)

Figure 4.4: A dynamic graph with tw o sequences laid out with Extended In terLa y ed la y out

(45)

Figure 4.5: A dynamic graph with tw o sequences laid out with Extended In terLa y ed la y out

(46)

Chapter 5 Developed Libraries and Tools

In this section, the developed dynamic graph layout library and the dynamic graph visualization tool are presented. Due to its advanced graph visualization features, Cytoscape.js (Section 3.3.1) has been chosen as the basis of our dynamic graph layout library and dynamic graph visualization tool.

5.1 Cytoscape.js-synched Extension

Cytoscape.js-synched is an open source, web-based library for doing synchronized layout of dynamic graphs. The library is written as a Cytoscape.js extension in pure JavaScript and does not have any dependencies. Using Cytoscape.js as a basis, allows us to make use of the implemented general graph algorithms and application developers can use the library in combination with the advanced visualization support of Cytoscape.js.

(47)

5.1.1 CoSE-Bilkent Library

CoSE-Bilkent is a Cytoscape.js extension that implements the CoSE layout algo-rithm (Section 2.3.2.1) for Cytoscape.js. Through the provided API, it is possible to customize and tune many parameters of the layout algorithm such as node re-pulsion, ideal edge length, gravity, gravity range, layout type (incremental or non-incremental).

The availability in Cytoscape.js, the quality of produced layouts and reason-able running time complexity convinced us to use CoSE-Bilkent library as the underlying static graph layout algorithm in the Cytoscape.js-synched extension.

5.1.2 Implemented Methods

Three different dynamic graph layout methods have been implemented in the Cytoscape.js-synched extension.

The first one is the aggregated layout method in which the layout of super-graph is created and the layout of each sequence in the dynamic super-graph is driven from the global layout [16, 3].

The second method that is implemented in the extension is the InterLayed layout method that is proposed in the Section 4.1.

The last method that is implemented in the extension is the Extended Inter-Layed layout method that is proposed in the Section 4.2.

5.1.3 Complexity Analysis

In the extension, CoSE layout algorithm is used as the underlying static graph layout algorithm. Therefore, each time the static layout algorithm is called, the overall complexity increases by O(|E| + |V |2).

(48)

In the first method, the super-graph can be created in O(k × (|E| + |V |)) where k is the number of sequences in the dynamic graph and |V | is the number of vertices and |E| is the number of edges in a given graph sequence. The CoSE layout algorithm is only called once while creating the global layout. Therefore, the overall complexity of this method is O(k × (|V | + |E|) + |V |2).

The overall complexity of the InterLayed layout method is analyzed in Sec-tion 4.1.3. It is shown to be O(k × (|E| + |V | + R)) where R is the running time complexity of the underlying static graph layout algorithm. Since the running time complexity of the underlying static layout algorithm CoSE is O(|E| + |V |2), the overall complexity of InterLayed layout algorithm is O(k × (|E| + |V | + |V |2)). This can be further simplified to O(k × (|E| + |V |2_)).

The overall running complexity of Extended InterLayed layout algorithm is shown to be O(k × (|E| + |V | + R)) in Section 4.2.3. When R is replaced with the running time complexity of CoSE, the overall running time complexity of Extended InterLayed layout algorithm becomes O(k × (|E| + |V |2)).

5.1.4 API

The API is given in the Appendix B.1.

5.2 EVEN

EVEN is a highly customizable, open source, web-based, cross-platform, and interactive application for E ffective V isualization of E volving N etworks, which is based on Cytoscape.js graph library and its extensions.

In the visualization of the evolving graphs, the main purpose is to understand how the graph changes over time. When the graphs are represented by an ani-mation (Section 2.2.1.2), the cognitive load on the user is very high [5]. The user

(49)

needs to keep a lot information in his/her memory to understand the visualiza-tion. Moreover, as the number of graphs in the dynamic graph gets larger, it becomes much harder to compare non-adjacent graph sequences.

In order to decrease the cognitive load on the user and make the comparison of non-adjacent graph sequences convenient, EVEN utilizes the timeline approach (Section 2.2.1.2). At a given time, two graph instances are shown side by side. The user can slide through the graph by using the user interface or choose two arbitrary graph Gi and Gj from the dynamic graph, and compare them side by

side. Integrated dynamic graph layout algorithms make sure that the mental map is preserved well between these graphs.

5.3 General Properties of EVEN

General properties of EVEN are described in the following subsections.

5.3.1 Supported Data Format

GraphML is an XML based comprehensive file format for storing relational graph data [24]. Graphs that are in the GraphML format can be imported and visualized in EVEN.

5.3.2 Interactivity

In EVEN, the following interactive operations are supported:

• Box selection: multiple nodes and edges in the active graph can be se-lected by holding down the CTRL key and dragging the mouse.

(50)

• Node repositioning: node positions can be changed by dragging it with the mouse.

• Zooming: the zoom level of the graph can be changed by using the scroll wheel of the mouse.

• Panning: holding mouse down on the viewport and dragging changes the pan level of the graph.

• Highlighting: when the mouse cursor is over a node (edge) the node itself and its neighbors are highlighted. If a highlighted node exists in the other viewport, then it is also highlighted. This makes it much easier to locate the same node in different sequences.

5.3.3 Customization

When a graph is loaded into EVEN, all the color information about nodes and edges are removed. The nodes and edges that are present in all graphs are assigned a default background color, and the remaining nodes and edges are assigned a separate background color. Using this color coding makes it much easier to compare the graphs: at a glance the user can see which nodes are present in both graphs, which nodes are only present in Gi and which nodes are present only

in Gj. The user can customize all of these color options. Another customizable

option is the color of highlighting on mouse over.

While removing the colors helps the user during the comparison, it is not always acceptable. In some applications, the colors of nodes may carry important information about the network. Removing the colors to make comparison easier, removes this information and it is not acceptable in such applications. In EVEN, there is an option for controlling this behaviour. When this option is turned on, the original color information is preserved.

(51)

5.3.4 Layout

EVEN uses the Cytoscape.js-synched layout extension (Section 5.1). Users can choose the desired layout algorithm among three layout algorithms which are provided by the extension. Many parameters of the underlying layout algorithm can be customized from the user interface.

5.3.5 Editing Features

EVEN has support for basic graph editing features. Nodes and edges can be added interactively to the graph. The user can choose the shape of the node and the style of edge. It is also possible to remove nodes and edges from the graph.

The style properties of a graph element, such as its label, width, height, shape and background color, can be edited and customized as well.

5.3.6 Synchronous Mode

Synchronous mode allows the user to explore and edit the graph synchronously. When this mode is activated, all actions done in one graph are applied to the other graph automatically. For example, if the user zooms in to a part of the graph in the viewport, the same part of the graph is zoomed in the other viewport as well. Or if a node is added, deleted, repositioned in one viewport, the same operation is applied automatically in the other viewport. All operations discussed in Section 5.3.3 and Section 5.3.5 support synchronous mode.

5.3.7 Exporting the Viewport

In EVEN, the visualized graphs in the viewport can be saved side by side in PNG and JPEG image formats.

(52)

5.4 User Interface

The user interface of EVEN is shown in Figure 5.1. The main items in the user interface are explained below.

(1) Menu: it is the main menu. Each menu item, corresponding sub-menus, and their functionality are explained in Table 5.1.

(2) Toolbar: the toolbar includes shortcuts to commonly used functionalities. The shortcuts are described from left to right: load file into left viewport, load file into right viewport, load multiple files, selection mode, add node, add edge, delete selected, toggle synchronous mode, perform layout, layout properties, and quick help.

(3) Panzoom tool: this tool allows users to change the pan and zoom levels and fit the graph to the viewport.

(4) Viewports: these are the actual viewports where the active graphs are dis-played.

(5) Navigation bar: by using the navigation bar, users can slide through the graphs or load any of the graphs into left or right viewport by selecting them.

5.5 Overall Architecture

The front end of EVEN is built by using HTML and CSS. User events are bound to actions by using jQuery. All graph related operations are handled by Cytoscape.js and its extensions. The overall architecture is shown in the Figure 5.2.

(53)

Figure 5.1: The main user in terface of EVEN

(54)

Menu Submenu Functionality

Files

Load Multiple Files Load more than two files into EVEN by holding down CTRL key and selecting files Load Into Left Load a single file into left viewport

Load Into Right Load a single file into right viewport Samples Load sample graphs

Save Save the viewport as GraphML

Export as Image Export the viewport as PNG or JPEG images

Edit

Properties Opens the general properties menu Delete Selected Delete selected nodes and edges Clear Remove all elements from the viewport View Synchronized Mode Activate or deactivate the synchroniuios mode

Layout

Layout Style Choose the desired layout algorithm Perform Layout Perform layout on the graphs Layout Properties Open layout properties menu Help Quick Help Open quick help menu

About About the tool and team

Table 5.1: Description of menu items in EVEN

EVEN

Cytoscaoe.js Extensions Accesses API

Registers

underscore backbone.js jquery HTML/CSS JavaScript

synched-layout

cose-bilkent context-menus panzoom edge-handles

Cytoscape.js

(55)

Chapter 6 Evaluation

In this chapter, the quality of the result of proposed dynamic graph layout meth-ods is evaluated by taking certain major layout quality evaluation metrics into consideration.

6.1 Experiment and Dataset

As discussed in Section 2.3.1, in the layout of dynamic graphs both the quality of individual graph sequence and the preservation of mental map among the nodes, which are common to all sequences, are very important. Hence, in our evaluations, we take both of these criteria into account.

6.1.1 Evaluated Metrics

For the evaluation of the quality of each graph, the following metrics are cal-culated: the number of node to node overlaps, number of edge crossing, total area, and average edge length. In order to measure how well the mental map is preserved among the common nodes, two metrics are evaluated: the average

(56)

distance among the common nodes and the weighted orthogonal ordering. The average distance shows how close the common nodes are to each other and is calculated by using Euclidean distance. Orthogonal ordering metric reflects how the ordering of a pair of nodes is preserved [9]. In the weighted orthogonal order-ing, changes in the ordering that are more likely to disturb the mental map are weighed heavily [9, 25].

6.1.2 Dataset

In the experiment, the graphs are generated based on a graph with 100 ver-tices that is randomly chosen from a graph test suite which is based on real-life graphs [26]. Then the graph is duplicated and five different versions of each graph are created by removing 10, 20, 30, 40, and 50 nodes and edges from each graph randomly.

6.1.3 The Setup

Each pair of graphs is laid out by using three layout methods, namely aggregated layout, InterLayed layout, and Extended InterLayed layout algorithms, which are supported by the Cytoscape.js-synched extension (Section 5.1) and their quality is evaluated. During the evaluation, default properties of the layout algorithms are used and the displacement factor δ is set to 0.2 to assure a certain level of stability.

6.2 Cytoscape.js-layvo Extension

Cytoscape.js-layvo is an open source Cytoscape.js extension which calculates the evaluation metrics discussed above (Section 6.1.1) of a given layout. The exten-sion does not depend on the underlying graph layout algorithm, the metrics of

(57)

any given layout can be calculated by using this library. The API of Cytoscape.js-layvo extension is given in Appendix B.2.

6.3 Results

The results are obtained by using the Cytoscape.js-layvo extension after applying aggregated layout, InterLayed layout, and Extended InterLayed layout algorithms to the generated graphs. Results for a dynamic graph, which consists of two sequences, are given in Table 6.1. Each of these sequences in the dynamic graph is created by randomly removing 30 nodes and edges from the base graph.

Static Layout Metrics

Layout Algorithm Aggregated InterLayed Extended InterLayed Graph G1 G2 G1 G2 G1 G2

Node to Node Overlap 0 0 0 0 0 0

Edge Crossing 2 0 11 3 0 0

Total Area (10000 square pixels) 287 308 115 203 230 269 Average Edge Length 87 86 103 93 82 80

Dynamic Layout Metrics

Average Distance N/A 35 4 Weighted Orthogonal Ordering N/A 1.07 0.03

Table 6.1: Evaluation results

More experimental results can be found in Apppendix A.1.

6.4 Discussion

Experimental results show that, the number of edge crossing for all of the eval-uated algorithms is minimal and comparable to each other. Most of the times, Extened InterLayed algorithm produces the minimum number of edge crossing, while the InterLayed layout algorithm produces the highest number of edge cross-ing. This was an expected result: as discussed in Section 4.2, in InterLayed layout

(58)

algorithm in some cases edge crossings are unavoidable and the Extened Inter-Layed method solves this problem.

In our evaluations, in most cases there was no node to node overlaps for all of the evaluated methods. This is mainly because of the underlying static graph layout algorithm CoSE, it minimizes the number of node to node overlaps well.

In all tests, the total area of graphs laid out by aggregated layout method was significantly larger than the area of others. As we discussed earlier (Section 4.1), the area was one of the drawbacks of the aggregated layout method. The proposed methods solve this problem. The results show that the InterLayed layout method produces layouts which have the lowest area. Total area of layouts produced by the Extended InterLayed layout is in between the other two methods.

As we discussed in Section 4.2, the InterLayed method can produce long edges in certain cases, and the Extended InterLayed algorithm was proposed to solve this problem. Our experimental results confirm the expectations: the average edge length in layouts produced by InterLayed layout method is higher than the average edge length in the layouts produced by aggregated layout and Extended InterLayed layout methods. The Extended InterLayed layout solves the long edge problem of InterLayed layout method, and usually produces average edge lengths that are lower than the average edge length in aggregated layout.

In the aggregated layout method, all the graphs are laid out together and the layout of each sequence is driven from that layout. The nodes that are present in all graphs are placed in the same position; therefore, the average displacement and orthogonal ordering is always 0. On the other hand, in InterLayed and Extended InterLayed methods, these nodes are allowed to move during the layout. When the average distance and weighted orthogonal ordering of InterLayed layout and Extended InterLayed layout algorithms are compared, it is clear that in Extended InterLayed layout method, taking the neighbors into account works well. In our results, the amount of average distance and orthogonal ordering in Extended InterLayed method is so small that it can be ignored. While these values are higher in InterLayed layout method, they are not significant to disturb the mental

(59)

map.

Overall, while compared to the others, the Extended InterLayed layout algo-rithm produces layouts that have the least amount of edge crossings and usually the lowest average edge length. It also reduces the total layout area while com-pared to the aggregated layout method. Moreover, its difference metrics – the average distance and weighted orthogonal ordering are so small the they can be ignored. Therefore, it has the best performance among the evaluated layout methods.

(60)

Chapter 7 Conclusion

In this thesis, methods and tools for synchronized visualization of evolving net-works have been proposed and developed.

First, we proposed two new methods for doing automated layout of dynamic graphs. These methods are extensible in the sense that they do not depend on the underlying layout algorithm; any existing layout algorithms can be modified and used in these methods. Our evaluations show that proposed methods meet the evaluation metrics to a satisfactory level and produce aesthetically pleasing results. Cytoscape.js-synched is a Cytoscape.js extension that implements these proposed methods alongside another existing method.

In order to evaluate the proposed dynamic graph layout algorithms, a new library Cytoscape.js-layvo has been developed. It can evaluate the general metrics of both static and dynamic graph layout algorithms. By using this extension, the performance of any layout algorithm that is present in the Cytoscape.js can be evaluated.

EVEN is another tool that has been developed as a part of this thesis. It is an open source, web-based, interactive tool for effective visualization of evolving networks. EVEN provides automated layout through Cytoscape.js-synched ex-tension. It is highly customizable and in addition to visualization support, it has

(61)

basic support for graph editing.

7.1 Future Work

The proposed methods are designed to work with offline dynamic graphs. As a future work, an adaptation of these methods to online graphs can be developed. In our evaluations, these methods are only compared to each other and to another already existing method. In order to evaluate the proposed methods further, another study which compares these methods to other existing methods is needed.

In Cytoscape.js-snyched library, three dynamic graph layout methods have been implemented. As part of future work, new dynamic graph layout algorithms can be implemented.

Our layout metric evaluation tool Cytoscape.js-layvo can calculate the main metrics of static and dynamic graph layouts. The list of calculated metrics can be extended further.

EVEN has support only for the GraphML file format. As further work, support for other file formats can be added. Lastly, new dynamic graph algorithms can be integrated into the tool.

7.2 Availability

All of the developed libraries and tool are open source. Their source code is available in the following GitHub repositories:

• Cytoscape.js-synched: https://github.com/iVis-at-Bilkent/cytoscape. js-synched

(62)

js-layvo

(63)

Bibliography

[1] P. Saffrey and H. Purchase, “The "Mental Map" Versus "Static Aesthetic" Compromise in Dynamic Graphs: A User Study,” in Proceedings of the Ninth Conference on Australasian User Interface - Volume 76, AUIC ’08, (Dar-linghurst, Australia, Australia), pp. 85–93, Australian Computer Society, Inc., 2008.

[2] H. C. Purchase, “Metrics for Graph Drawing Aesthetics,” Journal of Visual Languages & Computing, vol. 13, pp. 501–516, Oct. 2002.

[3] F. Beck, M. Burch, S. Diehl, and D. Weiskopf, The State of the Art in Visualizing Dynamic Graphs. The Eurographics Association, 2014.

[4] M. Gleicher, D. Albers, R. Walker, I. Jusufi, C. D. Hansen, and J. C. Roberts, “Visual comparison for information visualization,” Information Visualiza-tion, vol. 10, pp. 289–309, Oct. 2011.

[5] F. Beck, M. Burch, and S. Diehl, “Towards an Aesthetic Dimensions Frame-work for Dynamic Graph Visualisations,” in 2009 13th International Con-ference Information Visualisation, pp. 592–597, July 2009.

[6] S. Diehl and C. Görg, “Graphs, They Are Changing,” in Graph Drawing, Lecture Notes in Computer Science, pp. 23–31, Springer, Berlin, Heidelberg, Aug. 2002.

[7] H. C. Purchase, E. Hoggan, and C. Görg, “How Important Is the “Mental Map”? – An Empirical Investigation of a Dynamic Graph Layout Algo-rithm,” in Graph Drawing, Lecture Notes in Computer Science, pp. 184–195, Springer, Berlin, Heidelberg, Sept. 2006.

(64)

[8] K. Misue, P. Eades, W. Lai, and K. Sugiyama, “Layout Adjustment and the Mental Map,” Journal of Visual Languages & Computing, vol. 6, pp. 183– 210, June 1995.

[9] S. Bridgeman and R. Tamassia, “Difference Metrics for Interactive Orthogo-nal Graph Drawing Algorithms,” in Graph Drawing, Lecture Notes in Com-puter Science, pp. 57–71, Springer, Berlin, Heidelberg, Aug. 1998.

[10] H. C. Purchase, D. Carrington, and J.-A. Allder, “Empirical Evaluation of Aesthetics-based Graph Layout,” Empirical Software Engineering, vol. 7, pp. 233–255, Sept. 2002.

[11] U. Dogrusoz, E. Giral, A. Cetintas, A. Civril, and E. Demir, “A layout algorithm for undirected compound graphs,” Information Sciences, vol. 179, pp. 980–994, Mar. 2009.

[12] A. Karaçelik, An improved spring embedder layout algorithm for compound graphs. Thesis, Bilkent University, 2012.

[13] K. C. Feng, C. Wang, H. W. Shen, and T. Y. Lee, “Coherent Time-Varying Graph Drawing with Multifocus+Context Interaction,” IEEE Transactions on Visualization and Computer Graphics, vol. 18, pp. 1330–1342, Aug. 2012.

[14] Y.-Y. Lee, C.-C. Lin, and H.-C. Yen, “Mental Map Preserving Graph Draw-ing UsDraw-ing Simulated AnnealDraw-ing,” in ProceedDraw-ings of the 2006 Asia-Pacific Symposium on Information Visualisation - Volume 60, APVis ’06, (Dar-linghurst, Australia, Australia), pp. 179–188, Australian Computer Society, Inc., 2006.

[15] Y. Frishman and A. Tal, “Online Dynamic Graph Drawing,” IEEE Trans-actions on Visualization and Computer Graphics, vol. 14, pp. 727–740, July 2008.

[16] C. Erten, S. G. Kobourov, V. Le, and A. Navabi, “Simultaneous Graph Draw-ing: Layout Algorithms and Visualization Schemes,” in Graph Drawing, Lec-ture Notes in Computer Science, pp. 437–449, Springer, Berlin, Heidelberg, Sept. 2003.

(65)

[17] S. Diehl, C. Görg, and A. Kerren, “Preserving the Mental Map using Fore-sighted Layout,” in Data Visualization 2001, Eurographics, pp. 175–184, Springer, Vienna, 2001.

[18] C. Erten, P. J. Harding, S. G. Kobourov, K. Wampler, and G. Yee, “GraphAEL: Graph Animations with Evolving Layouts,” in Graph Drawing, Lecture Notes in Computer Science, pp. 98–110, Springer, Berlin, Heidel-berg, Sept. 2003.

[19] M. Baur and T. Schank, “Dynamic graph drawing in visone,” 2008.

[20] C. Collberg, S. Kobourov, J. Nagra, J. Pitts, and K. Wampler, “A System for Graph-based Visualization of the Evolution of Software,” in Proceedings of the 2003 ACM Symposium on Software Visualization, SoftVis ’03, (New York, NY, USA), pp. 77–ff, ACM, 2003.

[21] J. Ellson, E. R. Gansner, E. Koutsofios, S. C. North, and G. Woodhull, “Graphviz and Dynagraph — Static and Dynamic Graph Drawing Tools,” in Graph Drawing Software, Mathematics and Visualization, pp. 127–148, Springer, Berlin, Heidelberg, 2004.

[22] A. Dutot, F. Guinand, D. Olivier, and Y. Pigné, “GraphStream: A Tool for bridging the gap between Complex Systems and Dynamic Graphs,” in Emer-gent Properties in Natural and Artificial Complex Systems. Satellite Confer-ence within the 4th European ConferConfer-ence on Complex Systems (ECCS’2007), (Dresden, Germany), Oct. 2007.

[23] M. Franz, C. T. Lopes, G. Huck, Y. Dong, O. Sumer, and G. D. Bader, “Cytoscape.js: a graph theory library for visualisation and analysis,” Bioin-formatics, vol. 32, pp. 309–311, Jan. 2016.

[24] U. Brandes, M. Eiglsperger, I. Herman, M. Himsolt, and M. S. Marshall, “GraphML Progress Report Structural Layer Proposal,” in Graph Drawing, Lecture Notes in Computer Science, pp. 501–512, Springer, Berlin, Heidel-berg, Sept. 2001.

(66)

[25] S. Bridgeman and R. Tamassia, “A User Study in Similarity Measures for Graph Drawing,” in Graph Drawing, Lecture Notes in Computer Science, pp. 19–30, Springer, Berlin, Heidelberg, Sept. 2000.

[26] G. Di Battista, A. Garg, G. Liotta, R. Tamassia, E. Tassinari, and F. Vargiu, “An experimental comparison of four graph drawing algorithms,” Computa-tional Geometry, vol. 7, pp. 303–325, Apr. 1997.

Methods and tools for synchronized visualization of evolving networks

METHODS AND TOOLS FOR

SYNCHRONIZED VISUALIZATION OF

EVOLVING NETWORKS

a thesis submitted to

the graduate school of engineering and science

of bilkent university

in partial fulfillment of the requirements for

the degree of

master of science

in

computer engineering

By

Ilkin Safarli

July 2018

ABSTRACT

METHODS AND TOOLS FOR SYNCHRONIZED

VISUALIZATION OF EVOLVING NETWORKS

ÖZET

EVRİMLEŞEN AĞLARIN SENKRONİZE

GÖRSELLEŞTİRİLMESİ İÇİN YÖNTEMLER VE

ARAÇLAR

Acknowledgement

Contents

List of Figures

List of Tables

Chapter 1

Introduction

1.1

Motivation

1.2

Contribution

Chapter 2

Background

2.1

Graphs

2.1.1

Basics and Definitions

2.2

Graph Visualization

2.2.1

Visual Representations of Graphs

a

b

c

d

e

a

b

c

d

e

2.3

Graph Layout

2.3.1

Metrics for Evaluation of Layout Algorithms

2.3.2

Layout of Static Graphs

2.3.3

Layout of Dynamic Graphs

Chapter 3

Related Methods, Tools and

Libraries

3.1

Related Methods

3.1.1

Related Methods for Online Dynamic Graphs

3.1.2

Related Methods for Offline Dynamic Graphs

3.2

Related Tools

3.2.1

GraphAEL

3.2.2

Visone

3.2.3

Gevol

3.2.4

GDG

3.2.5