Making Data Beautiful: The Graph

Hi again! I’m back for my second post. Still making good progress with all things web related. I hope to make the graph tool live for you to play with very soon so you can understand what it is I’m waffling on about in this post.

Graphing tool for website
Screen-shot of graphing tool from website

I wanted a live data feed from the balloon whilst in flight however the stream of data we get from the balloon, even after it has been formatted from 1s and 0s, is very ugly and easier for a computer to read than a human. I had to come up with a good way of showing the data to a human audience. I believe the most interesting thing from the data will be the trends over the course of the flight. Therefore the best way of viewing the data would be an overview of how one data-field changes with another. Lucky there is already a way of doing this the people understand – the humble graph.

In order to accomplish this I decided to use D3.js, an open-source web framework designed for coping with large amounts of data. It is popular which means that there is lots of support online. It is very extensive, and has a way of doing anything I can think of so far (just look at some of the examples on their website!). It uses XML based vector graphics which is not only a useful thing to be familiar with in web development (very generic therefore good for anything running HTML) but also makes debugging easier. My favourite feature however is the ability to achieve exactly what I envisaged with it and really make it my own. I love the look and feel of how it’s ended up.

I have tried to make the graph interactive too to really realise it’s potential as the data centre. I want to allow the user to use the mouse to find individual data-points too so that I do not sacrifice too much specificity in favor of an overall view. I also have a feature which removes the need for many graphs: by allowing the user the ability to select the domain of each axis I give the user the power to find interesting trends themselves whilst keeping the whole tool concise.

I also have had a real challenge of making the data live without the need for a refresh and to make it smoothly transition as this new data comes in. I have achieved this eventually but as this was my main challenge I will save it for my next post. I am also being challenged by the size of some of the data when it comes to locating data points however I will talk about how I am tackling this in my next post also.

That’s all for now, this tool will be live soon with some example data. You can find it on the ‘Data & Graphs’ tab on the site once it is live. Hopefully you enjoy using it but if you think of any other features that would improve it feel free to send me a message (lde12@ic.ac.uk). Also message me with any questions about how I got it working or check out the source code on the site (http://eos.mybluemix.net).

Luke Ellison

Advertisements