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

Published by

oughton

Senior software engineer with extensive experience in enterprise software development targeting wholesale financial organisations and cloud solution providers.

Leave a Reply

Your email address will not be published. Required fields are marked *