HRI interactive visualizations: some technical notesTapio NurminenNovember 14th, 2011
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:
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.
This population visualization also uses Google Motion Chart. Its functionality is similar to the Bigchart, but in this case the dataset is smaller.
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.Tags: Flo Apps, open data, visualization
- January 2014 (1)
- November 2013 (1)
- September 2013 (1)
- August 2013 (1)
- May 2013 (2)
- March 2013 (1)
- February 2013 (1)
- June 2012 (1)
- April 2012 (1)
- March 2012 (1)
- February 2012 (1)
- January 2012 (1)
- November 2011 (2)
- October 2011 (1)
- September 2011 (1)
- August 2011 (1)
- July 2011 (1)
- June 2011 (1)
- April 2011 (1)
- March 2011 (3)
- January 2011 (1)
- December 2010 (1)
- November 2010 (2)
- October 2010 (1)
- September 2010 (1)
- August 2010 (1)
Tapio Nurminen on Vuoden 2013 kuntakartta SVG-muodossa
SVG-kartta on ensisijaisesti kuva, joten esim. kuntien sisälle ei ole tarkoitus sijoittaa täsmällist...
Petri Savolainen on Vuoden 2013 kuntakartta SVG-muodossa
Hei, miten tämän SVG-kartan koordinaattiavaruus on rakennettu? Voiko tähän karttaan jotenkin suoravi...