Hello everyone,
I tested the agraph component (@chris_klose) for graph visualization but it isn’t suitable to our need. So I wrote a new component based on vis network.
It has been published here: streamlit-visgraph
Key functionalities:
hey @tbhuy,
looks fab 
. also @napoles3d did something with PyVis in a more static way, if I recall correctly.
May I ask what you missed with agraph? Tbh, I am also a big fan of PyVis as it has this funny bouncing options + the picture upload was a must for me.
Frankly speaking, I think this component could be more pythonic in a way that it would take parameters instead of long unreadable json.
Besides that, could you pass python functions to the component, convert it to javascript and pass it along and return a value of that function? This was something I missed with agraph and hardly found a way to solve.
Few more thoughts:
Anyways, great work!
Best regards
Chris
+1
… and support for receiving graph events please? 
Cool!
Feel free to add it to the Streamlit Components - Community Tracker so we don"t lose track of it 
Have a nice day
Fanilo 
@chris_klose I discovered PyVis too late, when all had been done. I tried to implement python classes as you did but I had to deal with complex nested json objects, will try again. Now there are only some basic functions required for my project.
And to open a node link, just double-click on it.
Hey @tbhuy nice to have a new tool for graph visualization in Streamlit. Thanks for the mention @chris_klose!
@tbhuy Hi, after install this package , I run the code in github, it reported one error:
ModuleNotFoundError: No module named ‘streamlit_visgraph’
can you help me to fix it? Thank you.
import streamlit
from streamlit_visgraph import visgraph
nodes = [
{ 'id': 1, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/1.png" },
{ 'id': 2, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/2.png" },
{ 'id': 3, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/3.png" },
{
'id': 4,
'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/',
'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/4.png",
'label': "pictures by this guy!",
},
{ 'id': 5, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/5.png" },
{ 'id': 6, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/6.png" },
{ 'id': 7, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/7.png" },
{ 'id': 8, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/8.png" },
{ 'id': 9, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/9.png" },
{ 'id': 10, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/10.png" },
{ 'id': 11, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/11.png" },
{ 'id': 12, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/12.png" },
{ 'id': 13, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/13.png" },
{ 'id': 14, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/14.png" },
{
'id': 15,
'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/',
'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/missing.png",
'brokenImage': "https://visjs.github.io/vis-network/examples/network/img/indonesia/missingBrokenImage.png",
'label': "no image load",
},
{
'id': 16,
'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/',
'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/anotherMissing.png",
'brokenImage': "https://visjs.github.io/vis-network/examples/network/img/indonesia/missingBrokenImage.png",
'label': "no image load",
},
];
edges = [
{ 'from': 1, 'to': 2 },
{ 'from': 2, 'to': 3 },
{ 'from': 2, 'to': 4 },
{ 'from': 4, 'to': 5 },
{ 'from': 4, 'to': 10 },
{ 'from': 4, 'to': 6 },
{ 'from': 6, 'to': 7 },
{ 'from': 7, 'to': 8 },
{ 'from': 8, 'to': 9 },
{ 'from': 8, 'to': 10 },
{ 'from': 10, 'to': 11 },
{ 'from': 11, 'to': 12 },
{ 'from': 12, 'to': 13 },
{ 'from': 13, 'to': 14 },
{ 'from': 9, 'to': 16 },
];
options = {
'width': '1400px',
'height':'800px',
'nodes': {
'borderWidth': 4,
'size': 20,
'color': {
'border': "#222222",
'background': "#666666",
},
'font': { 'color': "#eeeeee" },
},
'edges': {
'color': "lightgray",
},
};
k=visgraph.visgraph(nodes=nodes, edges=edges, options=options)
+1
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.