CODEWITHSUNDEEP
pythoneventsclicknetworkxpyvis
charlopa24
charlopa24

Reputation: 93

Packages that work with networkx that can handle clickable nodes

I'm looking to try and visualize data using networkx as a network graph. My data looks great, but i'm wanting to add on hover and on click events to display additional information. For example, there might be a node called "New York", when clicked will display a small table to the side of the canvas that gives information like how many cities, current population, etc. I'm currently using pyviz with networkx. That seems to be really straightforward as far as creating the graph, but not so much on the kind of user interaction i'm looking for.

I also tried bokeh and plotly, but on the on click and hover functions while work, isn't very straightforward to implement with networkx. Here's a picture of what my graph looks like. My goal is to show relationships between systems.

pyvis graph

Upvotes: 6

Views: 3984

Answers (3)

Yan King Yin
Yan King Yin

Reputation: 1268

There is VisDCC, which requires Dash (a kind of data-science server thing).

The end result is a web server serving an HTML canvas that you can insert in a web page, for instance. (This is actually inherited from Vis.js)

VisDCC has almost no documentation but it works (I'm using it) and the usage follows that of Dash which is well-documented. You need to learn to use Dash's @callback format to write the code.

So I guess it's a good enough solution :)

Upvotes: 0

Paul Brodersen
Paul Brodersen

Reputation: 13021

I maintain a python library for network visualisations called netgraph, which works nicely with networkx or igraph Graph objects. I thought this was a neat idea for a feature, so I just implemented a bare bones version on the dev branch.

demo gif

Installation via pip:

pip install https://github.com/paulbrodersen/netgraph/archive/dev.zip

Code to reproduce the example above:

import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
import networkx as nx

from netgraph import InteractiveGraph

g = nx.cubical_graph()

tables = dict()
for node in g.nodes:
    data = np.round(np.random.rand(3,2), decimals=2)
    table = pd.DataFrame(data, index=['Lorem', 'ipsum', 'dolor'], columns=['sit', 'amet'])
    tables[node] = table

for edge in g.edges:
    data = np.round(np.random.rand(4,1), decimals=2)
    table = pd.DataFrame(data, index=['consectetur', 'adipiscing', 'elit', 'Mauris'], columns=['sed'])
    tables[edge] = table

fig, ax = plt.subplots(figsize=(12,5))
fig.subplots_adjust(right=0.6) # make space for table on the right
bbox = [1.5, 0.1, 0.5, 0.8] # position of the table in axes coordinates
instance = InteractiveGraph(g, node_labels=True, tables=tables, table_kwargs=dict(edges='horizontal', fontsize=16, bbox=bbox), ax=ax)
plt.show()

Upvotes: 8

Paco
Paco

Reputation: 666

Take a look at the kglab project which is an open source abstraction layer in Python that integrates both NetworkX and PyVis, along with other graph related libraries in Python. It was built for this kind of use case.

There's a class kglab.KnowledgeGraph which has transforms and inverse transforms to work these other libraries:

For instance, you could:

  1. build a graph using a KnowledgeGraph object
  2. transform out to run NetworkX graph algorithms
  3. use an inverse transform to populate calculated attributes on the main graph object
  4. transform out to load and run a PyVis interactive session, which in turn can have clickable components

We've got Jupyter notebooks on the GH repo showing each of these steps. plus a developer community where other people can help for a specific use case (create a GH issue)

Upvotes: 2

Related Questions