Visualising Dublin Recycle Facilities

I participated in a project that was developed during Interactivos?’12 Dublin which was organised by Medialab-Prado and was part of HACK THE CITY, Dublin’s 2012 flagship exhibition organised by Science Gallery.

The project was called Thanks for Recycling and originally was an idea of Martina Kalogjera.

We did a number of things, but what I’d like to talk about here is how to visualise geo-located data using the longitude and latitide and skip tiles and other tedious work. So, we got our API key for Dublin City maps and we were good to go. We queried the data to find the existing data facilities.

The data response looks like this (that’s just a sample here):

<?xml version="1.0" encoding="UTF-8"?>
<markers>
    <marker id="715" lat="53.34166204059" lng="-6.2142513929251" 
cls="false">
        <name><![CDATA[Ringsend Recycling Centre]]></name>
        <address><![CDATA[Pigeon House Road, Ringsend, Dublin 4]]>
        </address>
    </marker>
    <marker id="1798" lat="53.354949345405" lng="-6.2443851012856" 
cls="false">
        <name><![CDATA[Shamrock Terrace Recycling Centre]]></name>
        <address><![CDATA[Shamrock Terrace, North Strand, Dublin 1]]>
        </address>
    </marker>
    <marker id="104" lat="53.310275616603" lng="-6.2745812625401" 
cls="false">
        <name><![CDATA[Bring Centre Herzog Park]]></name>
        <address><![CDATA[Orwell Road, Dublin 6]]></address>
    </marker>
    <marker id="1799" lat="53.355334884953" lng="-6.27803326980319" 
cls="false">
        <name><![CDATA[Bring Centre Grangegorman ]]></name>
        <address><![CDATA[Grangegorman Road Upper, Dublin 7]]></address>
    </marker>
    <marker id="2006" lat="53.325739799004" lng="-6.2895988199836" 
cls="false">
        <name><![CDATA[Bring Centre Eamonn Ceannt Park]]></name>
        <address><![CDATA[Rutland Grove, Crumlin, Dublin 12]]></address>
    </marker>
    <marker id="2014" lat="53.324706069157" lng="-6.3090944344926" 
cls="false">
        <name><![CDATA[Bring Centre Windmill Road]]></name>
        <address><![CDATA[49-51 Windmill Road, Crumlin, Dublin 12]]>
        </address>
    </marker>
</markers>

Which is how most of geo-localised data look like. Initially, we thought that a web-based service would be quick to do what we wanted: to represent a circle around each recycling facility which represents 10 minutes walking distance around it. In this way we would see which areas have a recycling facility within walking distance.

However, using web services was not faster than using Processing and the library Unfolding (you can find it at your usual library-finding place). So we wrote the following code:

import processing.opengl.*;
import codeanticode.glgraphics.*;
import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.utils.*;

de.fhpotsdam.unfolding.Map map;

ListrssGeoLocations = new ArrayList();

public void setup() {
 size(900, 600, GLConstants.GLGRAPHICS);
 smooth();

 map = new de.fhpotsdam.unfolding.Map(this);
 map.zoomAndPanTo(new Location(53.32f, -6.25f), 14);
 MapUtils.createDefaultEventDispatcher(this, map);

 loadRSSGeoLocations();
 }

public void loadRSSGeoLocations() {
 // Load RSS feed
 //String url = "http://www.dublin.ie/maps/api.php?apikey=yourAPIkey
 //&action=getFacilities&what=recycling";
 //or save to a local file: 
String url = "dublin.recycling.api.php.xml";
 XMLElement rss = new XMLElement(this, url);
 // Get all items
 XMLElement[] itemXMLElements = rss.getChildren("marker");
 print(itemXMLElements[0]);

for (int i = 0; i < itemXMLElements.length; i++) {
 // Adds lat,lon as locations for each item
 float lat = itemXMLElements[i].getFloat("lat");
 float lon = itemXMLElements[i].getFloat("lng");
 print(lat);

 rssGeoLocations.add(new Location(lat, lon));
  }
 }

public void draw() {
 background(0);
 map.draw();

for (Location location : rssGeoLocations) {
 float xy[] = map.getScreenPositionFromLocation(location);
 drawEarthquakeMarker(xy[0], xy[1]);
  }
 }

public void drawEarthquakeMarker(float x, float y) {
 noStroke();
 fill(200, 200, 0, 100);
 ellipse(x, y, 140, 140);
 }

Which is *really* short, and does the job. Note that it gets “lat” and “lng” from the XML response. No tiles, no nothing. And the result we got:

dublinRecycleCentres

There you go 🙂

More about the whole thing, here.

Georgian transliteration rules

As you might have seen, I have built some transliteration rules for various alphabets. As of now, I completed rules to transliterate the Georgian alphabet to Latin.

This time, I used a combination of orthographic and phonetic transliteration.  This was achieved through heuristic evaluation with native speakers and through monitoring social media. One could say the result is a simplified mix of the Georgian government’s proposed romanisation and ISO9984.

Georgian→Latin:

Georgian to Latin

Georgian to Latin (results may have been improved since the screenshot was taken)

EU Arms Sales to Egypt 2011 Data Visualisation

Egypt is still in turmoil, and after some Czech ammunition was found in Tahrir Square, NISAT searched Eurostat and released some data about EU arms exports to Egypt. NISAT have a map tool that goes only up to 2009 and the data released are from 2011, so I made this visualisation below:

EU Arms Sales to Egypt data visualisation

EU Arms Sales to Egypt data visualisation

This matter has got my attention after @asteris tweeting about it.

An Infographic on Remaining Fossil Fuels

How much oil, gas, coal is there? What regions are affected by related conflicts? See the infographic below:

Fossil fuel stock visualisation

Fossil fuel stock visualisation

Data from http://www.informationisbeautifulawards.com/2011/09/premiere-challeng/

Visualising Spanish Art Mobility: an “Infographic”

From June 14 to July 1 at Medialab-Prado, Madrid, Visualizar’11: Understanding Infrastructures offered an international project development workshop and a theoretical seminar where selected papers were presented.

I participated in both the seminar and the workshop; you can see my seminar presentation here. From June 16 to July 1 I participated in the Dromoart project, organised by Arquitectura Expandida and Microgramma. Other participants included Gaston Gontero and Cristina de Miguel.

The project is about mobility of Spanish art ({im|ex}ports to/from Spain). We made a prototype of visualisations during the workshop; reflecting on what we can do next, I made this “infographic” below (collection of visualisations rather than narrative, hence the quotes). Click to view full size:

dromoart Infographic

dromoart Infographic: Click on image for full size

Hope you liked what we did, will keep you posted for any further development. 🙂

Visualising Demographics at UK Universities

I did the following for this competition:

Black students In the UK

Black students In the UK

I will say a couple of things about the process of making this. What happens is that I’m very busy because I’m presenting at Visualizar’11. So what I wanted to do was to get a quick idea of what’s happening in UK universities wrt demographics, and then visualise it.

That is, this is a visualisation for the busy person who just wants to see the big picture and get a clue of what the story is without drilling into piles of hard data. It seems to work for me, what do you think?

5 Great Video Demos from the UIST Archives

In this post I present five videos from the UIST video archives. I am not involved in any, but I find the videos I chose to be great presentations of UI research work. Here, I focus on the storytelling techniques that make these videos great and not on the quality of the research itself; all research published in UIST is great anyway.

For the non academics, UIST is the ACM Symposium on User Interface Software and Technology, one of the high-ranked conferences in the field of Human-Computer Interaction.

While compared to non academic videos these might seem slower and less fancy, in a video demonstrating research one has to be very accurate and avoid strong statements. So, apart from sharing these videos because I liked them, I also think that they can serve as a sort of guide, should you have to prepare a demo video for a conference yourself. Enjoy!

Directness and liveness in the morphic user interface construction environment

Mind you, this is a presentation back from 1995! Despite that fact it uses a visual language to explain its concept. Actually it’s explaining the concept and making a point at the same time. How? The presentation is the interface. That is, in order to explain the Morphic UI, elements of the interface actually move. Yes, it’s that cool.

In summary, the presentation visually supports the story the presenter tells and this leads to an understandable result.

See this video: http://www.acm.org/uist/archive/videos/1995/p21-maloney.mov

Organizing Photos of People

Andreas Girgensohn, John Adcock, and Lynn Wilcox, 2004.

This video is about organising photos with pre-used labels, something that we see happening a lot lately in similar ways, this is one way presented in 2004. This video zooms in to present each area of the interface, but only reasonably enough. You will not end up being dizzy after watching it. They zoom out to go back to an overview and zoom in again to present another area of the interface. Given it’s an academic demo, it shows a great use of music. Nothing of acquired taste, makes the video more interesting.

Overall, camera movement and music are used in a way that supports the narrative about the organisation of photos.

See this video: http://www.acm.org/uist/archive/adjunct/2004/videos/demos/d5-girgensohn.mov

Summarizing personal web browsing sessions

Ok, I can’t be objective with the next two papers, since I’m a fan of their work. 😀 One of the reasons though, is that also the video had grasped my attention when I first saw it (a few years back).

What happens is that the video summarises the problem of information diversity first, and then presents the authors’ work on unifying the structure and appearance of web content. It doesn’t present the solution and state problems it solves in the meanwhile, but has problems and solutions separated. That allows you to focus more on what you’re seeing at the moment rather than reflect on known problems and miss the content. Another thing I liked a lot is that they use really realistic examples.

I can say that the effort put into the video made me appreciate this great work even more.

See this video: http://www.acm.org/uist/archive/videos/2006/p115-dontcheva.mov

Relations, cards, and search templates: user-guided web data integration and layout

I’ll repeat that I’m not objective with this, since I like this work a lot. In this video from 2007 they describe user-guided layouts. That is, end users can design layouts that contain content from various sources. What I like about the presentation is that it embodies a tech demo, a tutorial, and a design process presentation, all in one. While they explain how it works, they also make apparent that their system is targeted to end users and that it is usable by end users.

This video illustrates one way in which one can be visually concise.

See this video: http://www.acm.org/uist/archive/videos/2007/p61-dontcheva.mov

Bubble clusters: an interface for manipulating spatial aggregation of graphical objects

In this video the authors describe an alternative way of visually clustering objects such as icons or lines. They present their work with dummy objects first and then they provide real-world examples. In the end they also demo user research and present its results. Sounds make the presentation more fun.

Building up from abstract examples to the real world and good use of sound makes this presentation understandable and pleasant to watch.

See this video: http://www.acm.org/uist/archive/videos/2007/p173-watanabe.mov

In conclusion, each of the authors avoided extravaganza; I don’t want to imagine how applying all of these techniques in one video would look like. They were very careful to pick techniques that match the nature of their work—or, it could be a result of familirisation with one’s own research. 😉

What do you think?