NETWORK DIAGRAM — data in the spotlight

Do you know a theory that every person in the world is connected by at most 6 shakes of hands (six degrees of separation)? For example there are 5 between me and Shinzo Abe.

me - my sister (doctor in a hospital) - head of the hospital - Polish minister of health - Polish prime minister - Japanese prime minister.

Your connections can take you to the most powerful or to the most ordinary people on Earth. Just picture it! Can be overwhelming, right? Visualizing such a broad network will soon have your head spinning.

Many designers have taken on such challenges. For example: Flight Radar application, which depicts all planes in the air at the given time.

Or this graphic about universities’ collaboration.

Harvard University’s connections in the area of biochemistry, genetics and molecular biology.

The reason why those visualisations work well is because they are interactive, which means that they allow you to select a flight you want to follow, or the university that you are interested in. But interactivity is not something you often see in a scientific paper. In consequence, you end up looking at a static network diagram like this from Chen et al. 2015:

Are you able to draw meaningful insights from it?

Makeover then! Unfortunately, I couldn’t really extract data from this graph, so I decided to show how you can design your network diagram using data from one of my “non-biological” projects. Specifically, it is based on a small dataset from a team building activity at Itility. Itility is an IT platform, focused on automation and data based solutions. I’ve been collaborating with them as a writer, but this time was given a data visualisation assignment.

The team building activity in question aimed at identifying the “troubleshooters” (people to whom you turn when facing obstacles) and “celebrators” (people to whom you turn for sharing your success) in the group.

All of this was piled on the bunch of post-it notes.

First step was to organize the post-its to see how does my “data” look like, or as I call it my “beautiful mind” moment:

A couple of drawings later and some time in Illustrator, the first design came out like this:

Each dot indicates an interaction, on the horizontal (x) axis are people who reach out to others and on the vertical axis (y) are the receivers of the requests. For example: person with initials VC turns to MR. This still need adding the nature of the interaction. I did it by using blue for troubleshooting and pink for celebration. Further, I moved the y-axis labels to the right to follow the more natural reading flow (left to right). As a last touch I added circles which indicate how many people and for what reason turn to them next to the names on the vertical axis.

I also tried an alternative approach:

This circular organisation is probably something life scientists among the readers are more familiar with, however notice how the graph is at the verge of readability at nodes with high number of in-out connections (AM). Which brings me to another issue: the size of your network.

Most likely when you are working with protein interactions, your network is bigger than 20 nodes. In which case, I strongly advice narrowing your focus and choosing the connections of highest relevance. Alternatively, you can keep “all connections” as a background (show them in light grey) and highlight with colour the ones that are new or relevant for your finding - just like I did in the header picture of this blog post.