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

New Zealand Trade Visualisation

My latest University project was to create a visualisation of choice with another class member.

Stephen and I came across a complete set of data from New Zealand to all other trading countries. I must point out here that NZ does a comparatively good job to the rest of the world in terms of data availability. Some countries that will remain unnamed (*cough* Australia *cough*) provide their data in PDF form ūüôĀ

StatsNZ Exports Datatable

This huge table was just screaming out to be visualised. We took inspiration from Minard’s effective French wine export map as well as from a global trade visual.¬†Both of these visualisations use the line width to indicate the quantity of exports between countries. Lines start off thick and then thin out as it branches off into countries. Our goal became to take this static idea and present it in a dynamic way using HTML5 technologies.

Minard - French Wine Exports Map

By combining StatsNZ data and country locations collected using Google’s geolocation API, we were able to produce a JSON datastructure that could easily be adapted to support the visualisation of other countries. The following diagram breaks down the process:

532exports Application Flow

And the final product!

It can also be viewed live in my testing folder here: Export Visualisation

Special thanks to my group member Stephen and to StatsNZ, and the Google Maps API for their awesome data.

Update: The code is now available on github.

New Zealand Budget 2011 – Where’s My Taxes!

The 2011 New Zealand budget was released today. A brief break down of spending has been posted on news sites such as stuff and NZ Herald.

Headlines read “Budget shows ‘lack of vision’” and “Budget: Thousands affected by cuts” respectively.

While such articles do attempt to give a general break down of Government spending across the sectors, it is far from complete and does not provide the viewer with the opportunity of exploring the data and picking out patterns themselves.

Thankfully, a friend of mine has produced a clean and concise visualisation for doing such task.

Mark’s Blog Post

Where’s My Taxes? Visualisation

 

Force Directed Emails Visualisation Using arbor.js

I have recently been playing around with ways of visualising my sent emails for an assignment at university. I have over 6 years worth of sent mail sitting in Gmail, collecting electronic dust (and occasionally being dusted off and looked at).

I downloaded all of my sent mail from Gmail (over 3000 conversations), making ¬†use of my university’s internet connection. I made use of thunderbird for this, as it stores emails in flat files on disk. I made a simple python script that takes this raw file and converts it into JSON.

import mailbox
import json

# path to you sent mail mbox
mb = mailbox.mbox('Sent Mail')

fout = file('sent.json', 'w')
items = []
fields = ['date', 'subject', 'to']

for i in range(len(mb)):
    obj = {}
    for item in mb.get_message(i).items():
        if item[0].lower() in fields:
            obj[item[0]] = item[1]
        mb.remove(i)
    items.append(obj)

json.dump(items, fout)
fout.close()

A nice javascript vis library called arbor makes it easy to take a graph and apply a force directed algorithm to it. It allows you to only worry about the visualisation side by separating the layout computation from the graphical display. Using this library and some basic javascript processing I was able to produce the following display.

Sent Emails Visualisation

I have obscured the recipient names for the sake of their privacy only (my own privacy has already been destroyed by the likes of such sites as Facebook – see: Facebook is an appalling spying machine).

The line widths between time periods and recipients relates to the number of emails sent to that person. Nodes can be dragged about and added in by dragging the sliders to alter the time range.

The most interesting part of this process was probably making a wordle based on all of the recipient names for all of the sent emails. The wordles changing from year to year showed the people that I was in the most communication with and perhaps most important in a given time in my life.

To leave you with an idea – someone needs to make a web app to anonymize wordles (ie replace words with random, but unique common words of the same length). A google search did not find anything meaningful.

** EDIT **
Lots of people have been asking for the code. I will provide the link to my github project but it will not include the data file. https://github.com/oughton/email-wordle/