 # Interactive Brain Graph Visualization (3): simple graph visualizations with random graph

The code of this visualization is available on my github:  https://github.com/astro1860/visualization_project/tree/master/random_graph_dynamic

In this part, we tried to visualize with different technique with random graph.

Firstly, we generated a 50 nodes random graph by networkx and we got the following graph.

import networkx as nx
from networkx.readwrite import json_graph
from operator import itemgetter
import json
import community
import matplotlib.pyplot as plt
import scipy as sp
import numpy as np
import scipy.io as spio
G=nx.random_geometric_graph(50,0.25)
# position is stored as node attribute data for random_geometric_graph
pos=nx.get_node_attributes(G,'pos')
# find node near center (0.5,0.5)
dmin=1
ncenter=0
for n in pos:
x,y=pos[n]
d=(x-0.5)**2+(y-0.5)**2
if d&lt;dmin:
ncenter=n
dmin=d
# color by path length from node near center
p=nx.single_source_shortest_path_length(G,ncenter)
plt.figure(figsize=(8,8))
nx.draw_networkx_edges(G,pos,nodelist=[ncenter],alpha=0.4)
nx.draw_networkx_nodes(G,pos,nodelist=p.keys(),
node_size=80,
node_color=p.values(),
cmap=plt.cm.Reds_r)
plt.xlim(-0.05,1.05)
plt.ylim(-0.05,1.05)
plt.axis('off')
plt.savefig('random_geometric_graph.png')
plt.show() This graph looked good though, we would like to see the detailed information of every node: eigenvector centrality and degree centrality. We calculated them in python and save them as node attributes. The example of how to generate them is on another blog post: Interactive Graph Visualization: from fMRI to json file

After obtaining the json file, we started to play with d3.js to do visualization. The example of how to construct this interface is in my other blogpost: interactive Graph Visualization 