Multilevel Network Visualization

Emmanuel Oppong
Computer Science and Engi neering
The Pennsylvania State University

SROP 2014 Report
August 4, 2014

Abstract
In this research project, we investigate the problem of visualizing large networks. Networks, or graphs,
are used to describe relationships between different objects. Graphs are widely used in social networks,
roadway systems, and in general, to describe a system that has interactions among multiple entities.
Visualizing relationships through graph drawings is important so that information can be easily
comprehended and navigated. Some networks, for instance social networks, can become very large
when they represent a large number of entities. In this project, we develop a new multilevel method for
visualizing graphs, using existing tools and algorithms for graph drawing. We tested this method on real-
world networks from several online repositories, such as the Koblenz network collection and Stanford
large network collection. We evaluated the method and compared it to alternatives. This research tool
will allow users to generate multilevel network visualizations for describing systems such as social
connections, microorganism relationships, highway systems, large populations, and map topologies.
Introduction
A network is a system of interconnected objects. Graph theory is the mathematical language used to
describe networks. It is a very old branch of mathematics which started in 1736 when Leonhard Euler
attempted to solve the problem of the seven bridges of Konigsberg. He tried to prove that there wasnt
a possible way of visiting each bridge without crossing one twice [1].Since then, graph theory has
evolved. Currently, researchers study how networks arise in real-world scenarios and analyze their
properties. Graphs are used to model relations in physical, social, biological, and information systems.
They are a unifying information abstraction to capture various types of data. Graphs are currently widely
used on the internet to make sense of large datasets. In 2012, Google announced the Knowledge Graph
feature as an addition to their search engine [3]. The idea was to build a massive graph of real world
objects and the connections between them. The knowledge graphs uses links between documents on
the web to understand their semantic context. The graph contains millions of objects and billions of
facts connecting them, which it uses to understand the meaning of the keywords entered for the search.
Facebook also utilizes a graph-based search engine. They combine big data from their billions of users
and external data into one big search engine providing user-specific search results.
The amount of data on the internet continues to grow each day. Graphs are used to create network
connections to make it easier to understand the type of information coming in, and the information that
is already there on the web. With the growth of data, especially on the internet, graphs have become
very large. They encapsulate millions of networks and can contain billions of different connection types.
Visual representation of networks is an important way of describing the data they represent.
Visualization of graphs is done with graph drawing techniques. A graph drawing is visual representation
of the vertices and edges it contains. The typical drawing of a graph consists of a shaded circle depicting
the vertices and line segments depicting the edges, which connects related vertices. Graph drawing
makes the information in the graph legible and navigable. The data within a network can be explored
through displaying the vertices and edges in various layouts with attributing colors, size, and other
properties. The display highlights patterns, shows connections, and provides visual information about a
vertex. These factors are used to draw conclusions about a certain dataset, in order to solve complex
problems.
There are many graph drawing techniques that utilize mathematical algorithms to space out the vertices
and edges accordingly. The arc diagram method (See Figure 1) evenly lays out all the vertices on the
same line, and the edges are drawn as semicircles that go above or below the line to connect the
vertices. The layered drawing method (also shown in Figure 1) is done by placing the vertices of directed
graphs in horizontal rows, with the edges directed downwards. These methods are ideal when drawing
displaying networks with a few vertices and edge connections. However, they are not ideal for drawing
larger graphs.


Figure 1: Arc diagram (left)[5], and Layered method (right)[4].
The force-directed system (see example in Figure2) is a physics-based method that calculates the
attractive and repulsive force between vertices, and moves the vertices along the direction of the force
[7]. The process is repeated multiple times until the edges are close to equal lengths and there are as
few crossing edges as possible. This method is better suited for displaying clustered graphs. The larger
the graph however, the longer it takes for the vertices to be repositioned.The spring electrical model
(Figure 3) is a type of force-directed algorithm, where the system is visualized as electrically-charged
vertices connected by springs [7]. Springs are imagined to be placed between vertices that share edges.
The vertices are pulled together by the spring, while a repulsive electrical force exists among all pairs of
nodes. This method is also repeated until the system reaches equilibrium [7].


Figure 2: Force-directed graph drawing technique [6].

Figure 3: Spring-Electrical Models [7].
The multilevel approach to graph drawing aims to scale very large graphs to small ones. This is done by
taking the edge connections between multiple vertices and separating them into layers. Figure 4 shows
a demonstration of the multilevel approach. First the original graph is broken down into parts, and then
new vertices are created encapsulating the parts they represent. The new vertices can be used to
construct a smaller graph, which is then displayed. The new smaller graph now allows easy visualization
of the entire graph.

Figure 4: Multilevel graph visualization approach.
Visualization of large networks, i.e., graphs with more than millions of entities, is very challenging. This is
due to the constraints of screen displays and the limitations of current graph drawing algorithms. To
solve this problem, we implement a multilevel approach, where the network is partitioned into smaller
graphs that hold different parts of the larger graph. Figure 4 illustrates the multilevel approach to graph
visualization.



A network can be partitioned in many different ways. It can be partitioned by labeled categories in the
dataset, using weights associated with the vertices, or using a user-defined parameter present in the
data. For example, if a data consists of a list of interactions between different animals, the data can be
partitioned by grouping together animals that belong to the same species. This way, we can visualize a
higher level view, where the types of species which will be represented by new vertices that belong to a
smaller graph. We can then navigate to a specific species, to view an animal that belongs to that
category.
There are many software tools currently used to visualize small graphs. Gephi[2] is a windows
application that is an interactive visualization and exploration for networks and complex systems. It can
be used for social network analysis, exploratory data analysis, and biological network analysis. It
provides tools for people to explore and understand graphs through graphical visualization. Sigma Js [9],
D3 Js, and Processing Js are all browser-based JavaScript libraries that are dedicated to graph drawing.
JavaScript is a dynamic computer programming language used to develop browser-based applications.
These JavaScript libraries can be used to simplify network visualization in a browser, and allow
application developers to integrate network exploration. We chose the Sigma Js library because it is the
most light-weight of the three aforementioned libraries, and allows more user interaction with the
display. We are creating a web user interface application, where users can upload a formatted large
graph with multiple connections. Sigma Js takes a specific input with formatted labels of the vertices and
edges with listed properties such as color and size. We are developing a PHP script for preprocessing, to
reformat the users input to the format that Sigma Js recognizes. The end goal of this project is to enable
users to upload their generated networks consisting of millions of vertices and billions of edges, and
visualize them in a multilevel manner.
Methodology
The process begins with a formatted graph that consists of multiple vertices and edges. The graph is split
into smaller ones according to their connections. This creates multiple layers of the different parts of the
graphs. The formatted description of the vertices of the smaller graphs holds the identifier of the lower
level networks they represent. When the user wants to navigate to a certain part of the graph, we use
the identifier to locate that part of the graph and magnify the display unto it. The vertex zoom
functionality will be created using JavaScript. A mouse click functionality will also be implemented. The
user can use mouse to navigate through the network by zooming onto specific layers of the graph or
directly onto a vertex. The Sigma Js library utilizes the force-directed method for drawing. The specific
plug-in of the library that uses the force-directed method is called force atlas. When the users network
is ready for display, the force atlas plug-in is called to calculate the position of the vertices for display.
We display the graph using force atlas which is part of the Sigma Js library. The algorithm ensures that
the vertices are well positioned so that all the edges are equal length and that crossing edges are
reduced as much as possible.
During the first four weeks of the eight week research term, we worked on creating the user interface
and building example networks to display. The goal of the application is to allow users to better visualize
and interact with their large networks. The user interface is designed to allow user to move vertices
around the screen, zoom in and out of specific items, and also display textual information about a
vertex. We also added a functionality to change the color of the vertices. Most importantly, the user
interface comes with a search bar where user can search for particular items. The user interface was
designed using HTML, a hypertext markup language used to create the graphical view of a web page.
The user interface consists of input boxes and button selections with which the user can interact with a
mouse and a keyboard. Using JavaScript, We connected the users actions to specific aspects of the
network display, thereby creating the user interactivity with it. We tested networks with different sizes,
small, large, and very large, to analyze the visualization, interactivity and performance the displays. We
found that Sigma Js can processes network with up to 1000 vertices at a preferred performance level,
however, when the vertex count exceeds that amount, performance begins to degrade. This finding is
acceptable for the multilevel approach we will used to solve out problem. If a network with a million
vertices is chosen for visualization, it can be scaled down to a network with 1000 vertices, where each
vertex holds another network with 1000 vertices.
The last four weeks of the research term was dedicated to partitioning of the large graphs into its
smaller scaled representation. To test the multi-level approach, we chose a network with 1000 vertices
and partitioned it into 10 different parts. We partitioned it numerically from 0 to 99, 100 to 199, and so
on. First we used C++ to write the code for breaking up the larger graph. We wrote the code following
the format of the dataset download from the large network databases. The different partitions were
written to new files and another file was created with vertices linked to the partitions. The files are JSON
formats which Sigma Js recognized for created the display of the vertices and edges.
Findings
We tested many different networks from two main sources, KONECT - The Koblenz Network Collection
[10], and Stanford Large Network Dataset Collection [11]. We also tested many randomly generated
graphs with arbitrary sizes and position. Here are some of the results from displaying the networks using
Sigma Js. Figure 5(a) shows a display of a randomly generated graph using Sigma Js. Figure 5(b) shows
the same graph display with the force directed plug-in from Sigma Js applied to it. As mentioned before,
the vertices of the network are moves so that the edges are close to equal length when the force
directed algorithm is applied.

Figure 5: a) Random generated graph with
Sigma Js.


Figure 5: b) Force directed plug-in applied.

Figures 6(a), 6(b), and 6(c) show examples of networks visualized using Sigma Js. These networks were
downloaded from Stanford large network database. The format of the data set was defined by the
creators and therefore had to be converted to the format required by Sigma Js. After careful conversion
from the Stanfords graph data format to Sigma Js JSON format, we displayed the graph along with its
properties. We also tested the effects of the user interface dialog box on these networks. We found that
the vertices responded to the mouse and keyboard actions designed in the program. The vertices move
accordingly and changes colors upon selection of the option to change a vertex color, through the user
interface. Figure 6(a) displays a network with 1000 vertices. Figure 6(b) has a network with 5000
vertices, and Figure 6(c) has a network with 10000 vertices. As we can see in the displays, the network
becomes clustered with the vertex points. The network becomes very hard to visualize. It is not easy to
interpret the type of information being conveyed by the graph. It also takes very long to navigate
through the graph to find a specific item.

Figure 6: a) 1000 vertices.

Figure 6: b) 5000 vertices.

Figure 6: c) 10,000 vertices.
The beginning face of the user interface (Figure 7), directly allows the user to interact with the network
displayed. Interactivity also plays an important role in the visualization of the networks, especially when
implementing the multilevel approach. The user interface makes the information with the network
easily accessible through a navigable display. The display screen can be repositioned along with specific
item to visualize specific parts of the network or to maneuver unto certain vertices. The user interface
allows the user to search for specific items with the data set, change the color of the vertices and
edges, and also change how the edges are drawn. The user can also fit the network to the screen is they
have navigated too far into the display. We defined the number of iteration of the force directed
algorithm when the network is first loaded onto the web browser screen. The user interface has an
option for the user to continue iterating through the algorithm to get a better display of the network.

Figure 7: User interface dialog box.
For testing the multilevel approach to visualizing large networks, we chose the network from Figure 6(a),
to partition. Our goal was to partition it into 10 parts and create a new display to link the partitioned
parts to the files they are stored in. When we loaded Sigma Js, the new display is drawn unto the screen
and also follows the interactivity of the user interface. The vertices in those displays can be changed
with color, position and style. We can now navigate to specific parts of the network we want to display.
We added two animation processes that display either the part of the graph the user wants to navigate
to, or a specific item. If the user searches for an item in the search box, the first animation zooms in to
the part of the graph that item belongs to. Then that part of the graph is loaded onto the screen. The
second animation zooms on to the item search and displays it along with its attributes.Figure 8 shows
the display of the scaled down version of the test network (Figure 6(a)). The vertices are color coated to
match the colors of the part of the larger network it is linked to. The graph is displayed with the force
directed algorithm applied to it. Figure 9 shows the different partitions that were created. The display of
each part consists of items that belong and items from other parts that are linked. They follow the color
coat. If there is at least one connection between two parts of the graph, an edge is drawn in Figure 8 to
connect those two parts.

Figure 8: Scaled display result from partitioning network in Figure 6(a).








Figure 9: The different parts of the larger graph the vertices in Figure 8 are linked to.

Discussion
The results of the tests ran on network display using Sigma Js confirmed our assumptions of the
multilevel approach. When the network is scaled down to a smaller size compared to its larger
representation, we are able to analyze the larger network very easily. For our tests, we chose to use a
network consisting of 1000 vertices. Given the results from these tests, we believe that partitioning and
visualizing networks with over a million vertices will follow the same process and produce similar results.
We have set goals to test our partition algorithm on these much larger networks. The next step is to
create multiple stages when partitioning the networks. For example, if a network has a million vertices,
we can partition it into 1000 different parts, each consisting of 1000 vertices from the larger network.
We can then move to partition further by splitting the new display into 10 parts, the display that consists
of 1000 vertices linked to the 1000 different parts of the larger graph.
We encountered several challenges while conducting this research. The primary concern when designing
the application was to create as much client-side processes as possible and utilize minimal server-side
processes. On web browser applications, server-side processes are those handled on the computer of
the host, and client-side processes are handled on the computer of the user accessing the application.
We aim to process the partitioning of the graph on the user end. However, in the current approach, this
is done on the server. We faced another problem with the use of the force directed plug-in provided by
Sigma Js. We saw that in some displays, the algorithm ran continuously without stopping. We saw some
vertices constantly moving, sometimes back and forth in the same position. We resolved this by only
iterating through the plug-in a certain amount of time and then bringing it to a halt for the first display.
As mentioned earlier, we provided an option in the user interface for the user to continue iterating
through the plug-in if they wanted a better display than the one provided.
We are now developing this work further to possibly include an improved user interface dialog box, and
parallel partitioning of larger networks. We will test the different partitioning algorithms on networks
consisting of millions of vertices and billions of edges. The goal is to minimize the time it takes to
partition the items in the larger datasets and to display the results. If the time to partition the dataset is
minimized, we will add a function in the user interface to allow users to partition the network in real
time. They will be able to define how they want the data to be separated in accordance to the format
provided and see the end results of it on the display screen. We will also design better iteration of the
force directed plug-in so that the first display of the network is desirable.
We believe that the findings of the research project will greatly benefit those interested in analyzing and
interpreting their large datasets through visualization. The end result of the research will be a website
with user access to the application. The website will allow anyone to upload their datasets and easily
visualize and interact with the information conveyed by the dataset. The website will also support
multiple formats of the dataset, and will provide a guideline for the user to follow so the upload the
right formatted document.
References
1. Rhishikesh S. Fansalkar, Graph Theory Origin and Seven Bridges of Knigsberg, New York
University, 2007.
2. The Gephi team, Gephi, http://gephi.github.io/, last accessed August 2014.
3. The Google Team, Inside Search,
http://www.google.com/insidesearch/features/search/knowledge.html, last accessed August
2014.
4. Graph layout, http://goblin2.sourceforge.net/refman/pageGraphLayout.html, last accessed
August 2014.
5. Jeffrey Heer, Michael Bostock, and Vadim Ogievetsky, A Tour Through the Visualization Zoo,
http://homes.cs.washington.edu/~jheer/files/zoo/, last accessed August 2014.
6. John Howse, Peter Rodgers, and Gem Stapleton, "VL/HCC Tutorial 2009: Automated Diagram
Drawing", http://www.eulerdiagrams.com/tutorial/AutomatedDiagramDrawing.html, last
accessed August 2014.
7. Yifan Hu, Current and Future Challenges in the Visualization of Large Networks, Encyclopedia
of Social Network Analysis and Mining, 2013.
8. Yifan Hu, Efficient, High-Quality Force-Directed Graph Drawing", The Mathematica Journal
10(1), 2006.
9. Alexis Jacomy, Sigma js library, http://sigmajs.org/, last accessed August 2014.
10. Jrme Kunegis, KONECT-The Koblenz Network Collection, http://konect.uni-
koblenz.de/networks/, last accessed August 2014.
11. Jure Leskovec, Stanford Large Network Dataset Collection,
http://snap.stanford.edu/data/index.html, last accessed August 2014.