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