How to animate growth of a social network?



I am seeking for a library/tool to visualize how social network changes when new nodes/edges are added to it.

One of the existing solutions is SoNIA: Social Network Image Animator. It let's you make movies like this one.

SoNIA's documentation says that it's broken at the moment, and besides this I would prefer JavaScript-based solution instead. So, my question is: are you familiar with any tools or are you able to point me to some libraries which would make this task as easy as possible?

Right after posting this question I'll dig into sigma.js, so please consider this library covered.

In general, my input data would be something like this:

time_elapsed; node1; node2
1; A; B
2; A; C
3; B; C

So, here we have three points in time (1, 2, 3), three nodes (A, B, C), and three edges, which represent a triadic closure between the three considered nodes.

Moreover, every node will have two attributes (age and gender), so I would like to be able to change the shape/colour of the nodes.

Also, after adding a new node, it would be perfect to have some ForceAtlas2 or similar algorithm to adjust the layout of the graph.

Wojciech Walczak

Posted 2014-05-21T05:29:36.787

Reputation: 886



It turned out that this task was quite easy to accomplish using vis.js. This was the best example code which I have found.

The example of what I have built upon this is here (scroll to the bottom of this post). This graph represents the growth of a subnetwork of Facebook friends. Green dots are females, blue ones are males. The darker the colour, the older the user. By clicking "Dodaj węzły" you can add more nodes and edges to the graph.

Anyway, I am still interested in other ways to accomplish this task, so I won't accept any answer as for now.

Thanks for your contributions!

Wojciech Walczak

Posted 2014-05-21T05:29:36.787

Reputation: 886

your links are broken – user1870400 – 2020-02-22T00:03:35.000


Fancy animations are cool

I was very impressed when I saw this animation of the discourse git repository. They used Gourse which is specifically for git. But it may give ideas about how to represent the dynamics of growth.

You can create animations with matplotlib

This stackoverflow answer seems to point at a python/networkx/matplotlib solution.

But D3.js provides interaction

If you're looking for a web-based solution then d3.js is excellent. See this, this and this for example. See also this stackoverflow question, the accepted answer points to D3.js again.


I would be drawn towards the python/networkx options for network analysis (possibly to add attributes to your raw data file for example). Then, for visualisation and dissemination D3.js is perfect. You might be surprised how easy it can be to write d3.js once you get into it. I believe it even works within an ipython notebook!

Graeme Stuart

Posted 2014-05-21T05:29:36.787

Reputation: 221

Thanks, I like this Python/networkx/matplotlib solution since it's my default working environment, and it's easy to make a gif out of this code. Still, something that looks nicer on the Web would beat this solution :) – Wojciech Walczak – 2014-05-21T12:10:22.683


My first guess is to visualize social network in Tableau.

And particularly: building network graphs in Tableau.

What you need is to add time dimension to the "Pages" section to be able to see network change dynamics.

This is screen from the link above. enter image description here


Posted 2014-05-21T05:29:36.787

Reputation: 4 894

1Hi, thanks for this tip, but I would prefer something that's easily publicable on the Web in a dynamic form. Also, I prefer free solutions, while Tableau - correct me if I am wrong - is only available as a trial version. – Wojciech Walczak – 2014-05-21T12:08:21.993

It also has "Public" edition, which means you have to store/share your results in the web, and can't save it locally. – IharS – 2014-05-21T12:10:59.243


@WojciechWalczak Maybe gephi can be used instead of Tableau.

– Amir Ali Akbari – 2014-05-30T06:31:29.873