Automatically adjusting the size of nodes with the GraphStream Library

This is a complimentary post about showing overlapping communities using the GraphStream Library with Java. When showing information by means of a graph there is the possibility of showing the relationships among the elements in a very intuitive and designing appealing way.  Whit graphs we can express the “importance” of nodes by varying the size of the nodes. For instance, a graph constituting cities can show larger nodes for more populated cities and smaller nodes for villages or small towns. In graph visualization software’s there is usually a tool for achieving this task. See the Gephi example in Figure 1.
Screenshot 2016-03-03 14.00.24

Figure 1 – The node attributes panel on Gephi.

I was looking to achieve the same with the visualizations that I am making for some of my PhD projects. In this small example I’m using the degree of nodes to express the “importance” and size of the nodes. Similar to the Gephi feature I’ve made a Java method in my application which receives the lower (smaller size that a node will appear) and higher (larger size that a node will appear) boundary values and used Feature Scaling Normalization

Feature scaling used to bring all values into the range [0,1].

to normalize and restrict the range from the minimum and maximum sizes of the nodes. The method is pretty simple. See the code bellow.

public void setNodesSizes(int minimumsize,int maximumsize){
  int smaller = -1;
  int greater = -1;
  for(Node n:Karate.getEachNode()){ //Karate is the GraphStream Graph Object.
    if(n.getDegree() > greater || smaller == -1)
      greater = n.getDegree();
    if(n.getDegree() < smaller || greater == -1)
      smaller = n.getDegree();
  for(Node n:Karate.getEachNode()){
    double scale = (double)(n.getDegree() - smaller)/(double)(greater - smaller);
  if(null != n.getAttribute("")){
     n.setAttribute("", n.getAttribute("") + " size:"+ Math.round((scale*maximumsize)+minimumsize) +"px;");
    n.addAttribute("", " size:"+ Math.round((scale*maximumsize)+minimumsize) +"px;");

The first loop discovers the lower and highest degrees in the graph to build the boundaries. The second loop set or add the attribute size to the attribute for each node. If the attribute is null, add, if not null, read and concatenate. The result with the same values (20 for min, 35 max) used on Gephi is shown in Figure 2.

Screenshot 2016-03-03 14.31.21Figure 2 – The Karate Club Network, node sizes are relative to node degree.

The complete source of this example is available on GitHub:

PLEASE NOTE: The static objects were used in this example for learning purposes only. Do not structure your Java Classes like this. Use the proper object instances instead. Thank you for the visit.


Showing Overlapping Communities in Complex Networks with GraphStream

My Ph.D. is focused on methods for overlapping community detection in complex networks. Complex networks are usually represented by graphs, mathematical abstractions of collections of objects (nodes) joined by lines (edges). These simple structures are very powerful and suitable to represent many complex systems, such as social networks, gene expression networks, transportation networks and many others.

There are several methods and algorithms for community detection with distinct approaches, however, the research in this field is much more related to physics and mathematics than to computer science or software engineering. My personal belief is that is the reason that many tools designed to solve the community detection problem lack of good quality visualization tools, or even do not offer any visualization at all.

Since I finished my first algorithm for overlapping community detection, MADOC (Memetic Algorithm to Detect Overlapping Communities). I started searching for a way to produce beautiful, or at least, good quality representation of overlapping communities. My first approach for small networks was reading the results of the algorithm and then use design software (eg. Adobe Illustrator) to produce high-quality representations of graphs with overlapping communities. This approach, however, is not practical due to the amount of time consumed drawing the communities over the graph. See an example here.


Figure 1 – Complex network of the co-appearance of Les Miserables Characters.

Luckily enough, this week I had the opportunity to try some Java Libraries and found the GraphStream Library. With allows using a syntax similar to CSS and nodes can assume a pie-chart shape. Therefore, I could use distinct colors for a single node, representing the communities of the node. The following Java Project shows the use of Graphstream to show overlapping communities on graphs.

To use the GraphStream library, download and add the .jar files as libraries to the Java Path of a Java Project. If you use Eclipse will be similar to this. On NetBeans is very similar as well.

Screenshot 2016-02-19 20.44.18Figure 2 – Adding the GraphStream library to a Java Project on Eclipse.

After that, you can create a class and start using the library to show graph files in the format .net or .gml.

In the following small example, a file named in a folder named karate is imported and displayed with some properties.

import org.graphstream.graph.ElementNotFoundException;
import org.graphstream.graph.Graph;
import org.graphstream.graph.implementations.SingleGraph;

public class Visualization {
  publicstaticvoidmain(String[] args){
  Graph Karate = new SingleGraph("Karate");"karate/");
  Karate.getNode("34").setAttribute("","shape:pie-chart; fill-color: rgb(255,0,110), rgb(0,255,1);");
  Karate.getNode(0).setAttribute("","shape:pie-chart; fill-color: rgb(255,0,110), rgb(0,255,1);");

Notice that, in the first line of the main method there is an instruction to the library to use the J2DGraphRenderer, this is not the default graph renderer, and, if you do not set to this specific renderer, the library will not show the pie-chart like nodes.

All the process is very straight forward, for each node that you want to use the pie-chart representation you must set the ui-style, like this:

Karate.getNode("34").setAttribute("","shape:pie-chart; fill-color: rgb(255,0,110), rgb(0,255,1);");

The fill-color attribute must have at least the number of colors that you want to show in the pie-chart node, and the shape attribute must be pie-chart. In addition, it is necessary pass the ui.pie-values, the sum of all values must be 1.


This must be done for each node that you want to represent as a pie-chart. Obviously through an algorithm and not one-by-one as shown in the example.

The next steps are adding the desired attributes to the visualization ui.quality and ui.antialias to make the Graph smooth. (This is optional).

You can also attach a stylesheet with CSS like properties to your visualization using addAttribute(“ui.stylesheet”,”url(‘style.css’)”);.

The CSS file used in this example has the following rules.

graph {
 fill-color: rgb(255,255,255);
edge {

You can play around with the shape attribute to edges to change the visualization of the edges. This example will produce a graph similar to the graph shown on Figure 3.

Screenshot 2016-02-19 21.49.15

Figure 3 – Zachary Karate Club Network with some overlapping nodes.

In Figure 4 an example is shown with all the nodes colored and some overlapping nodes and the edges colored according to the color of the source node.

Screenshot 2016-02-15 14.30.19Figure 4 – The “Natural Overlapping Communities” on Zachary’s Network.

The algorithm used to build the communities will be probably subject of a new post. If you like to try a more stylish and radical approach to design the edges, uncomment the line in the CSS file and make the shape of the edges like a blob, shape:blob. The result is similar to shown on Figure 5.

Screenshot 2016-02-19 22.18.45

Figure 5 – The Karate Club Network with colored nodes and edges. Edges are show as blob shapes.

Thanks for reading. I hope this small tutorial can help someone else.