Possibility to do interactive html ?

[lcrmorin]

I've been toying with the pyvis tool and I am very happy with how it is both very easy to grasp and very powerfull.

I am looking to go a bit further: would it be possible to modify the graph and its attributes in the html file ?

I understand it is possible to modify the physics attribute. However I was wondering how to: - change color of the grah based on attributes (I would generate a graph with each node having two attributes and I would be able to choose inside the html which attribute would be used for coloring). - Similarly, I would like to select a value and hide all edges (and linked nodes) with associated values below that threshold.

Any idea or ressources on how to do that ?

Regards,

[Szymen]

Dont you need just things from here? https://pyvis.readthedocs.io/en/latest/documentation.html In add_edge you can specify hidden=true. Or you want it to be dynamically as you make some changes after network render?

[lcrmorin]

Yes I was looking for something dynamical. Some way to specify the attribute used for color after the rendering / hide some nodes after the rendering;

[danilo-css]

Hello @lcrmorin. I'm currently doing my university research with PyVis and I can confirm that when you use it in conjunction with the Streamlit package you can make it interactive. See the attached image as an example. I can use user input with single select and multiselect filter elements to determine the data that is displayed on the network.

The same could be done to customize colors and other attributes.

[llvll0hsen]

hey @danilo-css can you please share your code with us?

[danilo-css]

Sure @llvll0hsen, sorry for the delay, still getting used to GitHub.

So the basic idea is the following:

import networkx as nx
import streamlit as st
import pandas as pd
import tempfile
from pyvis.network import Network
import streamlit.components.v1 as components

# Read your data
df = pd.read_excel("Somedata.xlsx")

# Create your streamlit filter (there are multiple types of filters, consult their docs, this is an example)
filter = st.multiselect('Filter for the dataframe',
                     options=df['Some column'].unique(), # Edit this with the column of the dataframe you want to filter, or a list of your choosing
                     default=['Option 1', 'Option2']) # Edit this with the default values you want to be selected

# Create a dataframe for the network that is filtered by the selected variable
df_filtered = df.loc[df['Some column'].isin(filter)]

# Create a networkx object
G = nx.from_pandas_edgelist(df = df_filtered, # your dataframe after you applied the filters from above from streamlit
                            source = 'Source', # The column of df_filtered that is the source of your network
                            target = 'Target', # The column of df_filtered that is the target of your network
                            create_using= nx.DiGraph) # I'm using this cause directed network but you can delete the last argument

# Create the PyVis object
net = Network(height='800px',
             width='100%',
             directed=True, # Delete this line if network not directed
             notebook=True)

# Load the data from the networkx network to the PyVis object
net.from_nx(G)

# Use tempfile package (native from python) to save the PyVis object and display it
with tempfile.NamedTemporaryFile(mode="w", delete=False, suffix=".html") as file:
    net.show(file.name)
    file.flush()
    HtmlFile = open(file.name, 'r', encoding='utf-8')

    # Load HTML file in HTML component for display on Streamlit page
    components.html(HtmlFile.read(), height=810)

[azizHakim]

I am working on making the nodes and edges editable from the HTML in Pyvis. Is it something that can be integrated as an official behavior? You should also be able to download the modified graph in JSON.