Advanced tutorial: real use cases

Layouts

Introduction
In this tutorial, we learn to use layouts algorithms and graph properties. We will first import a file system structure, then use the graph properties to find specific files. (*.cpp, *.hpp, ...)

File system import
To create a graph representing a directory structure, click menu File → Import → Misc → File System Directory. Select a directory not too big (to avoid a too long loading time) Each folder and file is represented as a node, and an edge link each node to its parent folder.

Layouts

Bubble Tree Layout
This layout algorithm can be found in menu Algorithm → Layout → Tree. The bubble tree layout is useful to notice directories that have similar structures, as we now demonstrate.
First, have two drawing side by side: create a second drawing (a Node Link Diagram View) by clicking View → Node Link Diagram View. Then reorganize the windows by clicking Windows → Tile
.
Now that we can see both views at the same time, zoom in on the right window: select the zoom tool and draw a bounding box on the left side of the graph like this:
Two nodes looks very alike. With the Get Information tool , we can get their ids: node 1965 and node 2009. It makes sense that these two directories have the same structure, since they both contain plug-ins source files.
Now, recenter the view (View → Center View or Ctrl+Shift+C).
Let's say that we now want to study our graph without the plug-in directory. To delete the whole directory (in the graph, not on disk), select it, then select all its sub directories, like this:
Select the plug-in directory: use the Find tool (Edit → Find or Ctrl+F), with parameters Input property:"name", filter: "= plugins".
Select all its sub-directories: click Algorithm → Selection → Reachable Sub-Graph with distance set to 50.
Delete the selected elements: press Del
Re-run the bubble layout: Algorithm → Layout → Tree → Bubble Tree.
The graph should look like this:

Tree Map layout
This Layout algorithm can be found in Algorithm → Layout → Tree. The treemap layout is useful to notice large disk usage files.
First, make sure that Options → Force Ratio is not checked.
Apply the layout algorithm: Algorithm → Layout → Tree → Squarified Tree Map with the following parameters:
Metric: "size".
Aspect Ratio: 1
TreeMap Type?: checked
The picture should look like this:
This drawing helps to see filesizes and notice larger files. It represent the hierarchy of directories as nested nodes. See Wikipedia: Tree Maps for more information.

Improved Walker layout
This is a hierarchical layout, useful to understand the tree structure of a file system.
Click Algorithm → Layout → Tree → Improved Walker. Use the following parameters:
Node Size: viewSize
Orientation: Left to right.
Orthogonal: Checked.
Layer Spacing: Default value.
Node Spacing: Default Value.
The result should look like this:

Labels
Click View Editor → Layer Manager and check the Nodes Label box in the first column.
To view labels, click Graph Editor → Property → name then To labels. You should now see a graph looking like this:
The labels don't fit in nodes, to fix this, go to the Rendering Parameters tab and check Scale labels to fit node sizes.
The picture should look like this:
By zooming in we can see the labels:
If you want to display the big file (high disk space) with big nodes, use the Algorithm → Size → Metric Mapping algorithm with parameter "property" set to "size".

Showing a specific kind of file
Now that our graph has a nice and clear layout, we would like to locate all our source files (*.cpp). To do so, use Edit → Find (or Ctrl+F) with the following parameters:
Input Property: name
Filter: filter function set to "=" and filter value set to ".*cpp or .*hpp". The filter supports regular expressions: '.' means any character and '*' means any number of times, so '.*' means any character, any number of times. ('*' should not be confused with a wildcard character.) For details on regular expressions, see Wikipedia: Regexp .
Options: check Replace and select On nodes.
Now that the source files are selected, we apply a different color to them.
Click Graph Editor → Property, select the node property "viewColor", check selected only. Now that we only see the "viewColor" property of the selected nodes, click Set all and choose (for instance) green.
The picture should look like this:

People in InfoVis

Analyzing an author
For this tutorial, download and open this tulip graph file. This graph represent relations between authors, conferences and papers in the InfoVis community.
To distinguish between paper, conferences and authors, let us color them:
Select all papers: click Edit → Find or Ctrl+F, set property: "type", set the filter "= 0".
Color the nodes in red: click Graph Editor → Property, select the 'viewColor' property, check selected only, click Set all and choose red.
Repeat for authors (type = 2) and conferences (type = 1) with other colors (here blue and yellow):
Let's look at a single author, for instance George Robertson.. Select that node with the Find tool, with "titleshort" "=" "G.*Rob.*" (this is a regular expression). Temporarily moving the node away gives a rough estimate of how connected he is:
Now, focus on the graph around this author:
click Algorithm → Selection → Reachable Sub-Graph, leaving direction to 0 (outgoing edges), startingNodes to viewSelection (nodes selected, in our case simply Mr. Robertson), and distance 1.
Click Edit → Create Subgraph to save this selection for further manipulation, naming it "GR.1hop.outgoing". Select this new subgraph in the hierarchy tab. We can deselect the nodes now: use selection tool and click away from any node or edge (or Ctrl+Shift+a).
To improve the layout, click Algorithm → Size → Auto Sizing, then change the layout for Algorithm → Layout → Hierarchical → Hierarchical Graph. There is an even better hierarchical layout on the plugin server: Help → Plugins → LaBRI Universite Bordeaux 1 → Layout → Sugiyama (OGDF).
We see which papers were published first, as they are cited by the later ones. Robertson has 11 papers referenced in this database. If we apply a coloring by the number of citations (Algorithm → Color → Metric Mapping, with field property set to "arityOut" ) we clearly see that "Cone Trees" is his most influential work:
Now,
return to the main graph, and make sure the Robertson node is away from the others.
Select all the papers nodes (Edit→Find, "property=0").
We want to add Robertson and all the edges going from or to this node to our selection. To do so, we need the selection tool, and by pressing Ctrl while drawing a rectangle encompassing the node and all of its edges, we add to our current selection. Save this selection to a new subgraph named GRCitesub:
In the new subgraph, select the Robertson node. Click Algorithm → Selection → Reachable Sub-Graph algorithm again, but with a depth of 2 to find all papers that cite a paper written by Robertson.
Now we want to remove any node or edge that is not selected: invert the selection (Edit → Invert Selection or Ctrl + I), delete (Del). This leaves us with Robertson and all his papers, and the papers citing his papers.
Finally, applying a hierarchical layout yields this picture:

What are the relationships between researchers?
You can now close this graph since we use another one for the next part. The next graph is similar to the this one but, has coauthorship edges linking authors who write papers together. Download it and open it.

Focusing on Two Authors
Here we focus on the relationship between two authors, in this case Robertson and Card.
Select Robertson like before: find, "titleshort" "=" "G.*Rob.*". Now, add the second one: Edit → Find, check option add, enter the regexp ".*Card.*".
Move those selected nodes away: use the "selection move" tool (if you click on one node, you will be able to move both at the same time):
Select all their neighbors with Algorithm → Selection → Reachable Sub-Graph with distance 1. We get the graph of all publications and coauthors of Card and/or Robertson.
Create a new Subgraph, apply a hierarchical layout:
One can repeat those operations for Robertson only and Card only:
The similarity of these final three images shows the very strong ties between these two authors.

Central Authors and Conferences: Overview
You can now close this graph. The next graph is similar to the old one, but the links are from author to papers, and from papers to conferences. Download it here and open it in tulip.
We used the following to show the large-scale structure of this dataset:
(already done) color authors in green, conferences in blue.
Consider only the author and conference nodes (i.e. not the paper nodes): Find "type >= 1", Algorithm → Selection → Induced subgraph, Create subgraph.
GEM layout (Algorithm → Layout → Force Directed → GEM)
Here is a close-up:
To select only the giant connected component (the largest connected set nodes), select a node in the center of the giant component and run Algorithm → Selection → Reachable Subgraph with distance 1000 and directed=2.
On this subgraph,
Highlight the structure with Algorithm → Measure → Graph → Eccentricity, with "Closeness centrality" checked.
To distinguish authors and conferences: select all authors (nodes of type 2) and set their viewLabelColor property to red.

Central Authors and Conferences: Top Conferences
To get a approximation of top conferences, we can look for the ones where the number of authors is high. To do so, click Algorithm → Measure → Graph → Degree :

Central Authors and Conferences: Top Authors
Run Algorithm → Measure → Graph → Strahler to see strong ties between conferences and authors:
Then run Algorithm → General → Convolution, the value of the discretization parameter should be near 30 to obtain 5 clusters: One gets the following clusters:
The Strahler-Convolution clustering yields five clusters, according to increasing centrality. The first cluster is mostly yellow, and contains most of the data. The second cluster contains a next tier of 26 authors that have had a relatively strong impact. The third cluster contains a group of 7 influential authors (Chi, Bederson, Eick, Rao, Pirolli, Ward, and Brown), and the fourth cluster (Roth, Robertson, Keim, and Stasko) is yet more central. The fifth cluster is the single node of Mackinlay, and the last one is Card and Shneiderman. Our automatic clustering method clearly yields plausible results in this case.

Hierarchical Structure of Inter-author Connections
In the last section, we use this graph.
To see the metanode labels, Click View editor → Layers Manager, check metanode label.
The clusters have been computed using Algorithm → General → Strength.
The overview image from the previous section, showing the graph of all authors and papers, is extremely cluttered. The previous section showed one way to extract information (find the most important nodes by convolution clustering). Another clustering approach, small-world clustering, allows instead to navigate through a hierarchical subdivision of the entire dataset. The simplified overview allows to understand the graph's high level structure. The strength metric computes the number of cycles of length 3 and 4 passing through each edge, normalized by the maximum possible value. The first image shows the clustered dataset. Small-world navigation is useful when exploring an unfamiliar graph to quickly find the structure of complex components. The eccentricity metric (Algorithm → Measure → Graph → Eccentricity), which measures whether nodes are peripheral (here in yellow) or central (here in blue), guides us to complexity immediately. This metric is O(n^3), but the small-world decomposition simplifies the graph, making the computation tractable.
Here is a close-up of the node that has many blue lines leading to it:
We then open that cluster (right-click on the metanode, go inside), which is itself a small-world graph:
We once again zoom towards the most central node with many blue edges, where we see a cluster containing the InfoVis 96 conference and all the authors who only published at the infovis community in that year.
We see this star shaped small-world decomposition only for the InfoVis conferences, because of the nature of this dataset: only the InfoVis conferences have a complete set of authors and papers available.

Importing data from CSV files

Importing new nodes from CSV file
The example below represents graph with ten entities. We will see how to import this graph in Tulip with the CSV import.

		  
	  node_id;second_major;gender;major_index;year;dorm;high_school;student_fac
	  0;0;2;205;2006;169;15903;1
	  1;0;2;207;2005;0;3029;2
	  2;0;1;208;0;0;3699;2
	  3;0;2;228;2006;169;17763;1
	  4;206;2;204;2006;0;2790;1
	  5;0;2;228;2005;169;50029;2
	  6;0;1;223;2006;169;3523;1
	  7;0;1;208;2007;169;2780;1
	  8;0;2;205;2006;170;5477;1
	  9;0;1;228;0;0;23675;1

Launch Tulip.
Click on "File->New"
Click on “Import CSV data.”
Edit the location field and select the file created from the example.
Choose the “;” character as separator.
Click on next.
Choose the columns you want to import (in our case all).
Click on next.
Select “New entities” in the “Import data on” list.
Click on the “Finish” button to launch the import.
You can now work with the imported graph.

Importing new entities from CSV file
The example below represents graph with ten entities and eighteen relations. We will see how to import this graph in Tulip with the CSV import.

	
	  "Source","Target","second_major","gender","major_index"
	  0,3,0,2,205
	  0,4,0,2,207
	  0,5,0,1,208
	  0,6,0,2,228
	  0,8,206,2,204
	  0,9,0,2,228
	  1,2,0,1,223
	  2,3,0,1,208
	  2,4,0,2,205
	  2,6,0,1,228
	  2,7,200,1,201
	  3,6,0,2,199
	  3,7,0,2,202
	  3,9,0,2,199
	  4,8,0,2,209
	  4,9,200,1,201
	  5,7,206,2,223
	  8,9,0,1,223

Launch Tulip.
Click on "File->New"
Click on “Import CSV data.”
Edit the location field and select the file created from the example.
Choose the “,” character as separator.
Choose the “ ” ” character as text delimiter.
Click on next.
Choose the columns you want to import (in our case all).
Click on next.
Select “New relations” in the “Import data on” list.
Choose the “Source” column in the “Choose CSV column containing source entities id”.
Choose the “Target” column in the “Choose CSV column containing target entities id”.
Choose the “viewLabel” property in the “ Choose the property containing existing entities ids”.
Check the Create missing entities to force the creation of missing entities.
Click on the “Finish” button to launch the import.
You can now work with the imported graph.