Data visualisation user controls

This was my final year dissertation project. I was keen to study this area of computing as it became apparent during my studies that data processing is one of the most important challenges that lie ahead. Without resorting to hackneyed slogans, data is now being produced at exponential rates thanks to huge investment in sensing, simulating, and communication technologies. Couple this with a decrease in storage costs and you end up with a situation where our ability to collect data has outstripped our ability to process it. Data visualisation (the graphical representation of data) is an important tool which can help redress the balance.

My research uncovered a situation where the disparate disciplines involved in the field of data visualisation were operating in apparent isolation. This enables the creation of inaccurate data visualisations, which is surprisingly evident in software. The lack of collaboration allows the conventional rules to be broken because ultimately, developers of data visualisation software were not aware of the founding principles.

This results in a ‘gap’ in current work where the wisdom of each discipline needs combining as a whole. Data visualisation user controls were created to fill this gap. User controls enable programmers to create visualisations that enforce the accepted wisdom of the field, without them having to be experts. This also redresses the balance between the widely available tools that target data visualisation experts who may not have any programming experience, and the lack of tools that target the reverse.

The controls implement the research findings through a sample set of visualisation techniques specifically chosen as they are suited to larger datasets that are now so common, and they also enable interactivity, which is a vital aspect when trying to make useful data discoveries:

treemap pictorial representation Treemap A treemap visualises data through the use of rectangles. The area of the rectangle is the encoding feature, which can also contain further nested rectangles to depict a hierarchy. parallel coordinates pictorial representation Parallel Coordinates Parallel coordinates use parallel axes for each data dimension. Then for each unit of data, a line is drawn from left to right, moving up or down depending on the values at each axis.
graduated symbol map pictorial representation Graduated Symbol Map Graduated symbol maps encode geographic data through the use of glyphs. A glyph is placed on the map and sized according to certain variables. The glyphs can be simple shapes, or more complex depending on the amount of variables. heatmap pictorial representation Heatmap A heatmap encodes numbers through the use of colour. This results in a grid of the data where each cell represents a value and is coloured based on the value.

The Windows runtime (WinRT) was chosen as the target environment, although this is arbitrary as the controls have been built up using standard controls that are widely available in other environments. The full dissertation has been published in the university’s online journal. Please feel free to use the controls and expand upon them.

parallel coordinates plot of car fuel efficiency data
A parallel coordinates plot visualising car fuel efficiency data.
treemap visualising large software projects by lines of code
Treemap visualising large software projects by lines of code.
graduated symbol map visualising worldwide alcohol consumption
Graduated symbol map visualising worldwide alcohol consumption.
heatmap of higher education institutions stats
A heatmap visualising various statistics of UK higher education institutions.

C++ 3D Software Renderer

This project provided an appreciation of how 3D graphics APIs such as DirectX and OpenGL work under the covers. To do this, a software renderer (written in C++) was built up from scratch. The following concepts were covered:

  • Geometric Transformations – how to get from model co-ordinates to screen co-ordinates a.k.a. the viewing pipeline
  • Vector maths – calculating vectors from points, vector addition, vector length, dot product and cross product
  • Lighting – ambient, directional, point and spot lighting
  • Reflection – Diffuse and specular (Phong/Blinn-Phong reflection models)
  • Rasterisation – Gouraud shading
  • Texturing
  • Cameras & Viewpoints – the view frustum, polygon culling and clipping

The evolution of Marvin image demonstrates the progression of the renderer. It starts with a simple wireframe, progressing to flat shaded polygons (using GDI+), and ending with a custom Gouraud shader to smooth out the image. Lighting effects are then applied to modulate the overall appearance, and finally the model is textured. The full evolution can be seen in the video along with an explanation of what is being demonstrated at each stage.

This was probably the most challenging project I have worked on to date, but ultimately it proved very rewarding as some really nice effects can be achieved. I really enjoyed the modular nature of how the project was built up, with a study of a particular algorithm, followed by its implementation. This allowed the application to be built up gradually, preventing it from becoming too overwhelming.

software renderer evolution depicting the changing states of a model
The evolution of Marvin the Martian.
Final software renderer demonstration.

Street Sounds

This was an exciting project as it gave me the chance to develop for the latest Windows 8 operating system. The brief was just to create something ‘cool’ (leaving just enough rope to hang myself with). Looking back, this proved to be an excellent form of motivation. Definitive briefs can often stifle innovation as you simply work through each requirement. I found that with a looser set of requirements I was more inclined to keep adding functionality as there was just enough doubt there as to what constituted a good application.

As music is one of my passions, I was interested in creating a music based application. Couple this with one of my favourite music sites and we have a good starting point. One of my first ideas was for a way of people to find information about street musicians that they come across. This required some form of geo-location functionality which was provided by Bing Maps.

One of the projects long running issues was the lack of attributes that the musicians apply to their music. Tracks uploaded to SoundCloud have many useful fields to fill in, unfortunately they are not mandatory and many are free-entry fields, which give a disparate range of search results when you try and query for such things as street musicians.

The lack of street musicians on SoundCloud resulted in the project evolving into a broader music discovery application whilst still retaining the location functionality. Users can browse for sounds near their current location, from a random point on the map, from a specific city, or they can just view the most popular, or most recent tracks on SoundCloud and see where on the map they are from.

From a programming perspective, the built-in Visual Studio templates made sticking to the Windows Store design philosophy straight-forward. The majority of the work was spent creating the data model, this made data-binding to the template controls relatively simple. The application is written in C#/XAML and utilises the Model-View-View Model (MVVM) pattern.

The application passed the Windows Certification Test but unfortunately it will not be appearing in the Windows Store due to changes in the SoundCloud API that now cause the geo-tagging features to be ignored. This proved to be a valuable lesson in using third party APIs! However I’ve made the code available as it may still prove useful to anyone interested in developing Windows Store Apps using the SoundCloud API.

home screen of the street sounds windows store app
The home screen of the application displays the current hottest tracks on SoundCloud from your favourite genre.
location based searching in street sounds
Location based search features.
street sounds player and playlist screen including share contract
Street Sound's playlist screen including the share contract.