Hi Streamlit Community! 
I wanted to share a new video tutorial I’ve created that explores how to build powerful, interactive graph visualizations in your Streamlit apps.
If you’ve ever struggled with visualizing network data, organizational charts, or complex routing systems, this video dives deep into using the yfiles-graphs-for-streamlit component alongside the NetworkX library.
The Video (English Dubbed)
While the original content was recorded in Spanish, I have utilized YouTube’s AI dubbing features to provide a seamless English audio track. You can watch it here:
Watch the Tutorial on YouTube
(Note: If the audio doesn’t switch automatically, simply check the “Audio Track” settings in the video player).
What you will learn:
In this tutorial, we build a New York Subway routing application to demonstrate:
-
Automatic Layouts: How to use yFiles to automatically arrange nodes (orthogonal, organic, hierarchical) so you don’t have to manually position them.
-
Pathfinding: Visualizing the shortest path between two stations using Dijkstra’s algorithm via NetworkX.
-
Heatmaps: Creating visual layers to show data density (e.g., passenger volume) directly on the graph nodes.
-
Interactivity: Handling user selection events on nodes and edges within Streamlit.
The Code
The best way to learn is to run it yourself! The full source code used in the video is available in my repository:
GitHub Repository
I hope this resource helps anyone looking to level up their data visualization game! I’d love to hear your feedback or see what kind of graphs you build with this.
Happy coding! 