More complex use case for visJS_2_jupyter


Authors: Brin Rosenthal ([email protected]), Mikayla Webster ([email protected])


interactive network

Import packages

In [1]:
import matplotlib as mpl
import matplotlib.pyplot as plt

import networkx as nx
import numpy as np
import pandas as pd

import sys
sys.path.append('../src/')
import visJS_module

import imp
imp.reload(visJS_module)
Out[1]:
<module 'visJS_module' from '../src/visJS_module.pyc'>
In [2]:
G = nx.connected_watts_strogatz_graph(30,5,.2)
nodes = G.nodes()
edges = G.edges()

Map node attributes to visual properties, and style the nodes and edges

  • To map node attributes to properties, simply add the property to the graph as a node-attribute, and use the return_node_to_color function
In [3]:
# add a node attributes to color-code by
cc = nx.clustering(G)
degree = G.degree()
bc = nx.betweenness_centrality(G)
nx.set_node_attributes(G,'clustering_coefficient',cc)
nx.set_node_attributes(G,'degree',degree)
nx.set_node_attributes(G,'betweenness_centrality',bc)


    

Interactive network

In [11]:
node_to_color = visJS_module.return_node_to_color(G,field_to_map='betweenness_centrality',cmap=mpl.cm.spring_r,alpha = 1,
                                                 color_max_frac = .9,color_min_frac = .1)

pos = nx.spring_layout(G)

nodes_dict = [{"id":n,"color":node_to_color[n],
               "degree":nx.degree(G,n),
              "x":pos[n][0]*1000,
              "y":pos[n][1]*1000} for n in nodes
              ]
node_map = dict(zip(nodes,range(len(nodes))))  # map to indices for source/target in edges
edges_dict = [{"source":node_map[edges[i][0]], "target":node_map[edges[i][1]], 
              "color":"gray","title":'test'} for i in range(len(edges))]

visJS_module.visjs_network(nodes_dict,edges_dict,time_stamp=1,
                          node_size_multiplier=7,
                          node_size_transform = '',
                          node_color_highlight_border='red',
                          node_color_highlight_background='#D3918B',
                          node_color_hover_border='blue',
                          node_color_hover_background='#8BADD3',
                          node_font_size=25,
                          edge_arrow_to=True,
                          physics_enabled=True,
                          edge_color_highlight='#8A324E',
                          edge_color_hover='#8BADD3',
                          edge_width=3,
                          max_velocity=15,
                          min_velocity=1)
Out[11]:
Network | Basic usage
In [ ]: