Fork me on GitHub
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
IEEEvis Tweeters
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
Follower network
Let's add the links.
It's a mess
State of the art
This a simple example of how even a small network visualization like this, it's useless in the real world
Lessons learned
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
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.
Separate clusters
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.
Thank you!

This talk was made using Jim Vallandingham's tutorial So You Want to Build A Scroller, updated for d3 v4. Here is this talk on Github

John Alexis Guerra Gómez @duto_guerra