Interactive Brain Graph Visualization (2): simple graph visualizations with barbell graph

Interactive Brain Graph Visualization (2): simple graph visualizations with barbell graph

What is barbell graph?

Barbell graph are two completes graph connected by a path, which is shown in figure 1. In a barbell graph, nodes in connecting path have more degrees than others, thus they are more popular. Moreover, the nodes also have larger eigenvalues of others, thus they are more important.


Figure 1. barbell graph examples


Compute centrality with Networkx

We firstly generate a barbell graph using G=nx.barbell_graph(6, 3, create_using=None). Two identical complete graph(with 6 nodes on each sides) form the left and right bells, and are connected by a path(with 3 nodes). We plot it in networkx, shown in figure 2.


Figure 2. Barbell graph visualization with networkx

We could notice that node 5 and node 9 are clearly more important than other nodes, for one thing, they are placed on the connection with bells and path, for another they have more degrees than others.

We calculate the eigenvector centrality by the following steps:

1. Calculate the eigendecomposition of the pairwise adjacency matrix of the graph.

2. Select the eigenvector associated with largest eigenvalue.

3. Element i in the eigenvector gives the centrality of the i-th node.

note: we have explained these on


The networkx provides function nx. eigenvector_centrality. The degree centrality of a node can be simply put as the number of edges it has. Also, “networkx” provides the function nx.degree_centrality. Moreover, we perform a ranking of the value of eigenvector and degrees from the largest to the smallest. After we get the centrality values, we save them as the node attributes and save in a json file.

Visualize with d3.js

Firstly, we implemented the fore-directed graph as an simple example to see its availability. It works perfectly well.


Figure 3. Barbell graph visualization with d3.js

Afterwards, we implemented a web interface and showing the following information:

- ranking of eigenvalues and degrees of each nodes from high to low

- show detailed information when the mouse is over the nodes

Visualization with d3.js with centrality information

Figure 4. Visualization with d3.js with centrality information




Leave a Reply