BASIC INTRODUCTION TO SIGMA JS IN JUPYTER NOTEBOOK AND NETWORK SCIENCE
Hey everyone, this blog is a continuation of my previous blog on D3 in Jupyter Notebook, this blog will be using the basic concepts from the previous blog. I am going to introduce you guys to networks and network diagrams using sigma js. Let’s get into it !
NETWORK SCIENCE:
Network science is the study of complex networks like telecommunication networks, computer networks, biological networks and even semantic/social networks. They usually consist of distinct elements that are represented by nodes and the connections between these nodes are via links called as edges.
This field has influences from various theories like:
- Graph theory — Mathematics
- statistical mechanics — Physics
- Data mining & information visualization -computer science (This is what we will be covering )
- Inferential modeling — Statistics
- Social structure — sociology
These study of network representations to various phenomena — lead to predictive models of these phenomena.
Visual Representation of a network:
This is a great article to learn more about networks and their different types. I will be posting more articles in this area as I have started exploring this area and found it very interesting. Now let’s get into Sigma js , something that will helps us use these concepts .
Sigma js:
Sigma is a JavaScript library dedicated to graph drawing. It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications. It has been designed as an engine that you can customize and use to develop highly interactive Web applications that show graph visualizations. Some of the features are:
- Custom rendering: Canvas or WebGL built-in renderers that will help you rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. And the built-in renderers also provide a lot of ways to customize the rendering.
- Interactivity oriented: You can catch when the users clicks or rolls the mouse over a node. You can catch when the user drags the graph or zoom in, and always know the position of the graph relatively to the screen. And much more.
- Powerful graph model: Sigma is just a rendering engine, but you might want to do more, like running your own graph algorithms. For that, sigma’s graph model is customizable, and you can add your own custom indexes on the data.
- Extendable: It is easy to develop plugins or simple snippets to augment sigma’s features. Some are already available in the main repository to read some popular graph file formats, or to run complex layout algorithms, for instance.
- Compatibility: Sigma runs on all modern browsers that support Canvas, and works faster on browser with WebGL support.
Among the features that make an interesting Sigma.js library are:
- The ability to chain methods
- Events management
- Ability to add plugins, use files GEXF, ForceAtlas2 algorithms, …
- Api simple and accessible
- Custom painted graphic maintenance
- Insertion using frames
The sigma js website shows a quick start guide(you can see the image below) , but we will try using a simple example from the PyData New York by Brian Coffey to implement it in Jupyter Notebook. You can check out the talk details from here.
From above we know that there are 3 parts:
- Data (it needs to be represent in dictionary)
- the HTML code (you can check out my previous blog on D3 in jupyter Notebook for an easy explanation)
- Finally, the output.
The Data:
We have already discussed that you require Nodes and Edges to create a network. In Jupyter notebook the data will be represented in the dictionary format. The image below will give you an idea.
MAKING A NETWORK DIAGRAM USING SIGMA JS IN JUPYTER NOTEBOOK:
Now let’s see how they look in a data frame, this is a randomly generated data and the link for it is here ( here is the GitHub link for this ):
Nodes:
- We have the id that represents the node and a label for it, here they are the same but you can give different names to it (like game of throne character names — to show their relationship with each other)
- You got the node size( giving you the magnitude of the node)
- And the respective X & Y coordinates in the space.
Edges:
- Each edge has an id explaining the node relation.
- Source has node id where it starts.
- Target has the node id where it ends.
The java script code:
Compile them and execute it :
Now let’s have a look at the interactive visual output( click on the gif below).
Hope you guys enjoyed the blog. My next couple of blogs are going to explore network science (graph theory and other related details), Java script and might introduce dimple js .
Reference :
http://barabasi.com/networksciencebook/chapter/1#vulnerability