Learning and visualising Graphs with ipycytoscape (part 2)
Goal
The objective of this article that follows a first one is to learn graphs from scratch using a visualizing tool called
ipycytoscape. In order to get into graphs I had made the point that it is better starting by visualizing because an image is worth a million words and also a million equations.
A small graph was built in the first part, and we made little by little some modifications to the graph showing how ipycytoscape can be used to get an idea of how data can be presented in a graph.
Links
ipycytoscape project: https://github.com/QuantStack/ipycytoscape
The first medium article is already part of the example of iypcytoscape.
All the notebooks are available in: https://github.com/joseberlines/learngraphs
Audience & previous knowledge
You code in python but somehow you had never had much to do with graphs.
You have read the first part of this series.
You are familiar with dictionaries and JSON structures.
The project
You have to imagine that you are a coder that is ultimately in charge of creating a GUI that shows the German rail net in an interactive way showing different kinds of information for the operators to be able to take decisions.
As a coder after having read the first article you are at a point where you might be facing the following situations:
- A friend told you that visualizing graphs in notebooks is not the way to go: I assure you that you will be able to tell him “voilà”. (“here you are” in French)
- Another friend might have told you that in order to really work in python with graphs you better start digging into Networkx. Well you might tell him that a pic is worth a thousand words, and for what it takes, a pic is worth a thousand equations. You will be able to jump from visualizing with ipycytoscape to Networkx in a moreal natural way, better than the other way around, that is my whole point with this series of articles.
- And yet other friend told you that in any case jupyter is not meant for a production environment, and then you might mention Jupyter Hub to serve apps throughout an entire organization using ipywidgets & ipyvuetify and see his reaction.
Following up previous work
Lets see where we stand from the previous article and move forward.
We have built a ‘mini’ German rail net with rail connections between 6 cities. (see here). BER (Berlin), MUN(Munich), HAM (Hamburg), FRA (Frankfurt) and LEP(LEIPZIG). That resulted in a graph.
We added also some information to the graphs.
Note: I will tend to paste here all the code and data necessary in order to avoid you to have to pick it up in GitHub or wherever else.
Adding nodes and edges
Nuremberg is a city in former West Germany. A new station was built in Nuremberg (NUR) and it has to be added to the train rail network GUI. Nuremberg’s station is joined to the network in Leipzig and Frankfurt. And the connections between NUR and the net is done only with regional rail connections. How do we add that to the net? A new node (station) and new edges (rail connections) had to be added.
Adding those nodes and edges to existing graph will happen in the already rendered graph when you run the code with the new data. The desired label for the new station is “HBf NUR in construction”.
Ups! The station is built but the rail connections are missing.
Let’s add the rail connections (edges).
The info that we got is that there will be two connections built as follows:
- connection NUR-LEP will be a regional train running only at 150km/h.
- connection NUR-FRA will be a regional train running only at 150km/h.
You see that already a little bit of magic happens. Since NUR is in the west (class=”west”) it got automatically the blue colour.
Mmmmm seems that there is still something missing. We don’t see the speed of the new regional trains added to the net.
Style of new edges
my_style was defined as a list with all the requirements for visualizing the graph. Let’s add the new necessary styles.
NUR station is not anymore in construction. So I want to change the label of the NUR station from “Hbf NUR in construction” by simply “Hbf NUR”.
Adding more nodes, classes and edges
The EU decides to promote a transnational European Union rail connection between mayor cities. New train stations in France, Italy and Spain have to be added to the net.
So far it is planned a 400km/h connection between BER, FRA in Germany, and from FRA to Paris (PAR) to Lyon (LYO) and from Lyon to Barcelona (BAR) and to Milan (MIL).
Besides, We want to visually separate the German train stations from the non-German ones.
So we will add the class “Germany” to all the German stations, and the new stations added will have the class EU.
In order to differentiate the German from the rest of the EU stations. Let’s give an orange colour to all the non-German stations.
Since we added the class “EU” to the new stations we can add a style to our list of styles as follows. And finally build a new graph rail net.
You see that we did not add many nodes, we are dealing with a tiny graph and our code got already quite verbose for changing here and there properties and attributes.
Imagine you have to work with the real German rail system. Thousands of stations and thousands of rail connections. Only with these few nodes you might have had this feeling of being lost, imagine with some thousand of those!!
Conclusion & what’s coming next
I hope to have made clear how to build and manipulate graphs in ipycytoscape. The graphs shown are extremely small but they serve the purpose of paving your way into graphs if you are a python coder totally beginner with graphs. Graphs can protray lots of information and relations between data.
Some gist for thought: You might be thinking how to build a graph if you are actually given tabulated data (excel file. You might be thinking what is the best way for going from Paris to Nuremberg? (there are two possibilities). You would like to add buttons for interactivity (show me stations with ongoing construction works, show me the high speed trains, the higher number of passengers, etcetc).
Stay tuned