Big Data Visualisation

Data Visualisation

Choosing the tools for visualisation of the train data was a quick and easy choice - Google Maps - as it provided the APIs we needed to display the train data using markers and heat maps.

Using the API it was easy to get the North East Latitude & Longitude and South West Latitude & Longitude of the containing viewing area and pass them down to the service layer via Ajax. The service would then be able to obtain a list of geo hashes that are required to cover the given bounding box which in turn are sent to the HBase repository layer to return data pertaining to trains contained within the viewing area (the final result being in JSON). It was then a simple task of mapping that data to the Google Map API to display the heat map.

What the heat map is displaying here is relative intensity of late trains. The more late trains a station has the redder that station appears on the map (green being the lesser intensity). If two train stations are in close proximity then the map may merge results to show a larger heat area representing the average intensity for that area.

Displaying useful information

Once we had established the mechanism for obtaining train data for a given area, the next task was to display it in a meaningful and useful way. Given the type of information we were obtaining we were able to:

  1. Show average lateness of trains at stations where trains are over N minutes late on average
  2. Show only stations that had over N% of its trains late

We provided date selectors to choose data from a pre-defined list of options or to choose a custom time span.

As far as the UI was concerned, the displaying of heat map data for these functions remained unchanged and it was the responsibility of the service layer to filter out the train data in accordance to the user’s preferences, however we needed to provide a mechanism for the user preferences that did not clutter the heat map and was responsive enough to work on mobile devices. This was achieved using Twitter Bootstrap and JQuery. The user can select her preferences by expanding the settings in the panel in the top right of the page.

We also provided a means to geolocate the map to the user’s current position using HTML 5 geolocation and a button that toggles station markers within the visible area.

Optimising data

The services were returning to the UI a list of trains that were late for the displayable area. This would ultimately result in returning data pertaining to a station that had many late trains. In an effort to optimise data we took the decision to aggregate station data on the service layer and return only 1 result per station with a quantity of late trains and let the UI work out how many data points to map.

Shareable / social links

Using HTML 5 (now W3C) pushstate we were able to manipulate the currently displayed URL to reflect the user’s current view and map configuration settings. This was done to allow the user to explore the data and then share their findings with friends. To facilitate the sharing of links we chose ‘Add This’ - a commonly used JavaScript plugin that provides social buttons.

Share |