6

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

Improve this question
1
  • networkx has an output to graphviz which can support some html items like title. from graphviz you can output svg. Commented Dec 8, 2021 at 22:10

3 Answers 3

Reset to default
8

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()
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

That's really great! Does it have a function for filtering? For example, If i enter "new" in a text field, it would show nodes like "new york, new jersey, new mexico, etc"
It is a library to visualise networks, not a dashboard for a searchable database, so no.
Where is this intended to be run? I tried it in a Jupyter Notebook and it renders but is not interactive.
@autonopy Did you use an interactive jupyter backend, e.g. with %matplotlib notebook?
@PaulBrodersen - nope, I hadn't, but that works. Thanks!
2

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)

Improve this answer

3 Comments

Hi Paco, thanks for the reply. Is it using the clickable funcitions provided with PyViz? Because PyVis doesn't have the clickable functionality that I'm looking for. I can click and drag nodes around as well as modify node shape, edge length, etc... but that's not what I need. I need to be able to click on a node and have a side window load with information about that node. If this can make that work, i'm all for that. But as far as I can tell, pyvis is really difficult to work with to make those things happen.
I see what you mean. On the one hand, we're providing a Python abstraction layer so that NetworkX graphs and RDFlib graphs can be integrated with other graph libraries, so PyVis is just one instance and there are probably others that are simpler to manipulate the onClick handlers in a UI
On the other hand, most of these graph visualization libraries are JavaScript under the hood, and it's only a few lines of code to add an onClick handler. PyVis has an experimental branch working toward this, and other developers have created their own github.com/WestHealth/pyvis/pull/91/files
0

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 :)

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.