Network Visualization in the real world
We designed and implemented a real world Network Visualization tool, here is what we learned.
Scroll for more!
Let's learn with an example
@ieeevis most followed
Here are the top 100 accounts with most followers in the @ieeevis community
They were calculated by collecting the Twitter users who tweeted about @ieeevis last year. I wanted to find who where the most interesting people I should be following, so I looked at who they followed
Let's add the links.
State of the art
This a simple example of how even a small network visualization like this, it's useless in the real world
Select most important nodes
On a large network we cannot show everything. So select the most important nodes of the network. You can use different network metrics to select the most important nodes. In this twitter example we can select the most followed accounts to be our base.
Also select their neighbors
Also select their neighborhoods. The most important nodes might not be connected, so also select a small sample of the important's neighbor nodes.
Lesson 1. Rank by importance
Filter out everything else, and allow the user to change the filtering parameters
Let's add the links back
So we can compute communities
Use clustering to highlight communities. We created and open sourced an in-browser network clustering library. The fact that it is clustering on the browser allows user to detect communities on the currently user filtered nodes.
Showing clusters is not enough. Separate them using force-in-a-box, an open source dynamic group in a box algorithm that separate each cluster into it's own box.
Hide inter-cluster links
Hide inter cluster links depending on the task.
Lesson 2. Show an overview of communities
Lesson 3. Navigate into clusters
Allow users to jump into a cluster.
Lesson 4. Where am I?
But provide also widgets to help guide the user in the graph
Lesson 5. Ego centric views
Sometimes users want to explore the connections of one or more nodes of interest. Provide layouts to understand distances between nodes.
Lesson 6. Node Pinning
Allow users to pin nodes on the layout
Lesson 7. Node Expansion
And finally allow users to expand connections on demand.