HRI interactive visualizations: some technical notes

Posted by Tapio Nurminen on 14 Nov 2011 | 1 Comments | Tags: open data, visualization, Flo Apps

Flo Apps Ltd published interactive visualizations of Helsinki regional data in March. Since then, we have been asked on several occasions to shed more light on the tools we used to create those visualizations. Here we go:

Bigchart

The "Bigchart", as we came to call it, uses Google Motion Chart as its technical platform. The original data was provided by City of Helsinki Urban Facts in Excel format. We converted the data to CSV and imported it into a MySQL database. One of the key issues in using Motion Charts is defining the database table structure. In Helsinki’s case, the database structure was optimized to facilitate easy updates. Numeric values are kept in one table and area names etc. in separate tables.

When used within Motion Chart, data must be restructured. The meaning of each column is first defined to Motion Chart:

data.addColumn('string', 'Alue');
data.addColumn('number', 'Vuosi');
data.addColumn('number', 'Väkiluku yhteensä');

and then data is sent to Motion Chart, row by row, in JSON format:

['049 111 Pohjois-Leppävaara', 2002, 5867, 90, 4, 5, 4235, 43, 19, 24882, 4536, 84, 6, 85, 6, 83,
 5, 3407, 60, 13, 42, 8, 32, 15, 'Espoo' ]  

Values that differ strongly from the rest of the recordset can create large empty areas in the Motion Chart. Luckily, the Motion Chart can be zoomed by the user by selecting an area (see instructions by Google).

Some values (. and ..) indicated unknown values in the Helsinki data. The Motion Chart interpreted these values as zero which would of course cause the tool to scale abnormally. These values are therefore removed before sending the data to the Motion Chart.

Population Change

This population visualization also uses Google Motion Chart. Its functionality is similar to the Bigchart, but in this case the dataset is smaller.

Map

For the map visualization, we decided to use the OpenStreetMap platform. We had worked a lot with GoogleMaps before but we wanted to get to know OpenStreetMap better. Another issue some people have warned against is the Google Maps license policy which may cause unpleasant surprises in some cases.

In the map visualization, the user must first choose which phenomenon s/he wants to visualize. The map visualization uses the faceted search provided by Mysema Ltd. Data gets cached on our server. If a particular JSON dataset has not been used before, it is fetched via CURL from the JSON-interface provided by Mysema Ltd and gets saved for later reuse.

Helsinki Urban Facts provided us with the KML-files which are used to define the borders of areas. Each geographical area is formatted into a “feature”, which gets its styles dynamically. This way, we can change areas’ background colours as time animation proceeds. Every time the year changes in the animation, the time function sets new values into the array and requests recolouring of each “feature”.

Each data set is split into four numeric ranges. Each value in the data array is compared to these ranges’ border values. As the year changes, if the new value is outside the bounds of the previous range, the area gets a new background colour.