Showing off the streamlit-agraph Component

Hi Guys,

just wanted to share my brand new streamlit-agraph component with you.
It is an interactive graph visualization component. In the future I might make it more customizable.
If you have any ideas how to improve it, leave a comment bellow, or send me a mssage.
Also if you are intersted in collaborating on this, give me a ping.

At this point I’d also like to thank Tim (@tc1 ) for the nice tutorial.
You pinpointed exactly the process and what was necessary to know,
to get the job done.



Nice! Would be great to see a demo too :smiley:

Sure :slight_smile: Something like this ?

Next, I want to include images for each node and a sidebar for the customization of properties. However - here comes my special requirement - is it possible to do this in a sidebar on the right side of the app?

Some sidebar extention á la st.sidebar(align=“right”) or so would be nice.

It would be great too, if one could open/close the sidebar with a little button á la st.sidebar(mode=“dynamic” and default = static.


Wow @chris_klose how did I miss this, this looks amazing :slight_smile: !

Could you add it to the Components Community Tracker so it doesn’t get lost :wink: ?



Looks fab Chris! :raised_hands:
And wow, that footer! :wink:

1 Like

@andfanilo thanks for sharing this page, i did not even not a wiki of all components exists in the forum :smiley:

the footer ofc haha!

Hi @chris_klose – thanks for sharing this, it’s really cool. Should you be able to pass in an edge weight to have thicker edges between nodes? I’ve tried doing it, but it appears they all draw the same thickness.
Here is how I’m creating the nodes / edges:

for i, r in d.head(300).iterrows():
    nodes.append(Node(id=r['player'], size=400))
    nodes.append(Node(id=r['team'], size=400, svg=r['team_img']))
    edges.append(Edge(source=r['team'], target=r['player'], weight=r['cnt']) )

And here is the result: