Network Bandwidth Visualisation for Graphs

Part of my honours project consists of visualising network bandwidth utilisation on a node/edge graph.

Basic information visualisation techniques can be used to make simple, effective and communicative network edge graphics. Current network packages that produce such graphs, from what I have seen, do not attempt to communicate very much information through graph edges.

Lets go through a quick process of making an effective edge.

Say that we have two nodes A and B.Bandwidth 0

A simple way of showing that both A and B are connected to each other in each direction would be a double sided arrow between the two.

Bandwidth 1

Lets change the arrows so that they face towards each other and converge in the middle of the two connected nodes.

Bandwidth 2

So far this just indicates a bidirectional link between the two network devices A and B. Let us use the basic idea that wired networks are essentially just a series of tubes.

Connect both A and B with an empty pipe and a divider in the middle. Then draw arrow heads along the respective pipe sections to show the percentage of the total bandwidth that is currently in use.

This is using the length of the line to indicate the percentage utilisation which is a quantitative variable. The use of length is effective for human recognition of quantitative values. The length clearly shows that about half of the A->B link’s bandwidth is currently in use.

Bandwidth 4

We are not making use of the vertical dimension. Make the height adjust according to the total bandwidth available on a link. For example 100Mbit, 1Gbit, 10Gbit etc.

Again, line thickness is effective for displaying quantitative values. It is obvious that the link A->B has about twice the bandwidth as B->A.

Bandwidth 5

You may have noticed that up to this point I have been avoiding the use of colour for bandwidth quantities. Colour is actually one of the most least useful means for visualising quantitative variables. However it is effective for categorical variables.

Lets say for example that green is good, yellow is intermediate and red is a bad network state. These categories are shown well by adding the respective colours to arrows within the pipe sections. Alternatively the pipe section colours could indicate these network states.

Bandwidth 6

Putting all of this together, we get as our final product:

Bandwidth 8

ADSL Cap Delay

Up until a few months ago, we only had 20GB bandwidth per month at my flat. This meant that we could not make heavy use of the internet during the duration of the month.

We are on a plan that caps the internet speed down 64kbit/s when you exceed the monthly limit. However there seems to be an approximately 24 hour delay between going over the bandwidth limit, and getting capped.

Lets do a little math.

  • time = 24 hours = 24 x 60 x 60 seconds
  • internet speed = 800 kb/s

24 x 60 x 60 x 800 = 69120000 kb = 65.9GB

Thats right, I can potentially more than tripple my bandwidth allowance by saving up all the large downloads until the last day of the billing month.

I tested out this theory a couple months ago and managed to download 36GB in one day. The only reason this stopped was because I ran out of things to download and I was not at home at the time 🙂

ADSL usage screenshot