Static Graph Visualization Toolkit

This toolkit contains three graph visualization components:

  • Grapfine: GraphVis for small sized multivariate graphs (#nodes < 1,000)
  • GraphSphere: GraphVis medium sized graphs (1,000 < #nodes < 10,000)
  • HGraph: GraphVis for huge graphs ( #nodes > 10,000)


Input format of graph visualization components


All the graph visualization components takes a json file as input. Following is an example where each the json file contains two primary attributes: "nodes" and "links". "nodes" is an array indicates all the vertices in the graph and "links" is another array contains all the links in the graph.
Each node is a json object that contains the attribute "id" (must have) and a set of other attributes that are defined based on different applications such as "name" and "group" in our example. Each link is also an object with two fixed attributes "source" and "target" in it. "source" indicates the id of the first node in the edge and "target" indicates the id of the second node in the edge. This definition makes it directed but in visualization we treat them as indirected edges. Similarly, each edge can also have other attributes defined by users (e.g. "value" in our case).

{
"nodes":[
{"id":"v1","name":"Myriel","group":"Watson"},
{"id":"v2","name":"Napoleon","group":"Cambridge"},
{"id":"v3","name":"Mlle.Baptistine","group":"Almaden"}
{"id":"v4","name":"Peter","group":"Austin"} ],
"links":[
{"source":"v1","target":"v2","value":1},
{"source":"v1","target":"v3","value":1.5},
{"source":"v2","target":"v4","value":2}
]
}


Setup and Run Graph Visualization Toolkit


Setup and run "Grapfine" for a small graph :

(1) unzip the package under the apache web folder. (e.g., /var/www/html/Grapfine/)
(2) put the data file into the data folder. (e.g., /var/www/html/Grapfine/data/)
(3) open the url (http://url_to_server/Graphfine/) to display the visualization of the data


Run GraphSphere


Under development...

Run HGraph


Under development...