Learning and visualising Graphs with ipycytoscape (part 1)
Goal & public
This article is for total beginners in graph theory and graph visualization in python.
This article’s goal is making accessible and understandable to total beginners the visualisation of graphs in the ipywidgets ecosystem (notebooks) and at the same time showing the internals of ipycytoscape, a great library for graph visualizations in jupyter notebooks based on cytoscape.js.
The reader might also refer to the medium original article of the authorof ipycytoscape Mariana Meireles.
What is a graph?
Graphs are mathematical structures used to model pairwise relations between objects.
Examples can be thought as:
- Facebook relationships between people (friendship)
- Twitter (follow — being follwed)
- Train net of a country (cities connected by train rail connections)
- Online dating platform connections
- etc
In this article I will take the example of a rail net structure of a country (Germany) and will illustrate the use of graph visualisations through ipycytoscape.
Graph nomenclature
What we want to represent are the rail connections between four cities in Germany: Berlin, Munich, Frankfurt, Hamburg.
Based on this example we can get straight to the basic nomenclature of graphs:
The basic nomenclature consist in (base on an example of the train rail system)
- nodes = railstations and
- edges = rail connections between train stations
Note: You might be thinking that there might be two different rail connections between two cities. True. But this is for a much later stage. You start connecting two cities just with one way.
Creating our first graph.
The basic way to create an ipycytoscape graph is based on a JSON “data” as follows.
Basically there is a list of the rail stations (nodes) and another list of the connections (edges). Every station has an id and every connection has a source and target point.
Later on it might be clear that other ways to pass data to ipycytoscape are not only possible but probably desirable in many circunstances. For the moment we pretend to create a really small Graph get to up and running understanding graphs and ipycytoscape.
Moreover be aware that normally the data itself is in an external separate file, but if we would proceed reading the data from an external file we would not be able to see it in the notebook and the notebook (assuming you running in one go) would not serve the teaching purpose.
This is the result.
Some observations:
- The train stations have a color (but we did not specified that)
- Between the train stations there is a connection (edge) representing the rail. Think about this, it can be unidirectional (train goes only in one direction, or bidirectional, the connections are in both directions. This is what “directionalyty” stands for.
- We dont know which station is which (no names)
Lets try to solve that problems.
IMPORTANT NOTE: We are creating a new graph every time in order for you to be able to scroll up and down and compare the results.
Direcionality
How would have been the JSON file if we don’t want directionality? Compare this two graphs one with and the other one without direction.
Result:
We have now a directed graph, which actually does not correspond to the reality since the rail connections are not only in one direction but in both, trains go and dome back. But you can imagine that in twitter a connection can be unidirectional, A follows B but B does not follow A.
Adding names
Lets say we want to see the names of the stations over the nodes. Those names are called labels. We have to add then the corresponding lables to all the nodes.
As you can see we did not achieved our objective of adding the name of the sations-nodes so far. (btw, HBf states for central main station in German). In order to affect and change the appearance of the graph we have not only to change the data of the graph but the style. Lets introduce the style.
What are we doing here?
We are writing down our style for a node (selector) and afterwards we will tell ipycytoscape that the label data(label) should be printed out and how (helvetica and 20px)
Lets create a new graph with the labels
Take into account that this is a bit of CSS nomenclature.
We “ select” the elements we want to affect and we pass a style to that element.
We added the name of the train stations to the graph but lets just play around and change the size of the font and the type of font as well (font looks a bit big).
The result starts to be a bit more “nice”
The first question that comes to my mind is if I can change the attributes of only one node. Lets see.
We gave a particular style to ALL the nodes (‘selector’: ‘node’) and afterwards we gave the color green just to the berlin central station (‘node[id = “BER”]’)
As you can see the way to “access” the node is ‘node[id = “BER”]’.
More customization layout
What else can we change in the apperance?
There are a bunch of other atributes of the graph visualization that we can change. But lets start by the basics.
Lets assume that the train connections between the cities are as follows:
- BER — HAM -> 300km/h
- BER — MUN -> 200km/h
- MUN — FRA -> 100km/h
- FRA — BER -> 250km/h
We can also add information to the edges. We need to think that it is neccesary to add the labels to the edges and also we have to be able to identify every edge.
Classes. what are they and what for?
Now imagine we want to divide the rail net into two parts.
(NOTE: These classes do not have anything to do with OOP classes)
- cities belonging to former east Germany and
- cities belonging to former west Germany And paint them in one go with a particular color. One go meaning that I dont want to paint node by node but being able to tell “paint all the west cities blue and east cities green”.
We can use classes for that.
We add a class to any node.
Lets see it with an example from the very beginning again.
What happended?
With
{‘selector’: ‘node[classes=”east”]’, ‘style’: {‘background-color’: ‘yellow’}}
we painted all east German cities yellow. BER as well. But BER colour is overwritten by the green color of the BER node.
Next
After having undertood this little bit, there are a lot of questions opened that we will treat in future notebooks.
- How to change atributes programatically? for instance if we have an input field with number of passengers the user can input a data and the color of the railstation will become red if the number of passengers per day is greater than 200000
- How to add and delete elements of the graph: A new station is built in a population called Cologne. How to add that node and several edges to an existing railnet.
- How to add events: You are building an application for the rail company and they want that when the user hovers over the node information about the station pops up for the user to red.
Stay tuned.