Artefact & Readme Download

Here is the download link for the Artefact & Readme.

thelockwood.co.uk/artefact/DanLockwood10209818.zip

Final Project

My WhoCares application allows users to either find out which part of the world is feeling happy or another emotion by clicking on one of the pre-assigned buttons or to visualise which part of the world is tweeting about a topic or news story at the time you asked in eleven large cities across the globe.

On the application’s start, the user can click on one of the buttons or type in their own choice, click on the text box and press enter. The WhoCares application will then search all eleven pre-selected cities and ten miles around the centre of the city and find any tweets that have been posted around that area. The application will then visualise how popular that subject is by increasing the size of a circle relative to the map and city. If no hits have been found, no circle will be created.

The purpose of my application is to see both how popular a subject can be worldwide and also to track where and how fast news stories can travel.

An example of this happening can be taken from a recent news story. Once a story broke out in America that a murderer may have been related to another set of murders, I ran the WhoCares. application to find out who had been tweeting about it. I did the same query shortly after and the circles had increased significantly, as you can see below.

Since the news story was based in America, they were the first to start tweeting about it, however London and Sydney also started as well.

This was taken at around 4pm GMT, so in Sydney and Tokyo for example they may not have been talking about it either because simply they are not interested or because they were still asleep at the time the news broke.

Some of the pre-defined emotion buttons search for emoticons such as ‘:)’ and ‘:( ‘, rather than the words i.e. ‘happy’ and ‘sad’ as I thought that they were more universal and would attract more hits from the countries that didn’t have English as a primary language.

Getting the code to work

I then looked at first how I would get the key word to search. Using the ControlP5 library, I was able to create a text box and button that would then display whatever I had typed into the text box to the console. I took this and adapted it so it would set the text value as the value ‘question’. I also created a series of buttons with pre-defined key words that would always be on the page. Each of these buttons set the text box with a value as you can see here:

void happy(int theValue) {

myTextfield.setText(":)");

}

So by pressing enter when the text box is in focus, the first thing to happen is text in the text box is set to the value of ‘question’.

question = theEvent.controller().stringValue();

I then do a query based on the location of the city within ten miles and then by whatever the user is searching for. For example, I will show you how the search in London happens. Also the value I will be searching for in this demonstration will be the word ‘journey’.

int counter;

counter = 0;

GeoLocation location = new GeoLocation(51.500408,-0.125999);

Query location_query = new Query(question);

location_query = location_query.geoCode(location, (double)10.0, Query.MILES);

location_query.setRpp(100);

QueryResult result = myTwitter.search(location_query);

ArrayList tweets = (ArrayList) result.getTweets();

for (int i = 0; i < tweets.size(); i++) {

counter = counter + 1;

}

fill(counter*2, 255, 255);

stroke(0);

strokeWeight(2);

ellipse(lonx, lony, counter/2, counter/2);

counter = 0;

First of all, the application finds the geographical location I am trying to query. It then searches for any of those tweets containing ‘journey’ within ten miles of that location. It then limits that search to one hundred tweets. It then counts them using a loop and adding one to the value ‘counter’ for each tweet with ‘journey’ in and then sets the radius of its circle depending on how popular ‘journey’ was in that area, as well as changes the colour value of the circle to also reflect the same. The lighter and larger the circle, the more popular it is. It then resets the counter value for the next city.

The other locations are just the same, only with the initial coordinates changed and repeated for each of the eleven cities. I then added lines in between all of the cities for aesthetic effect.

Basic Querying

As I had never used the Twitter4J library before I searched for an online tutorial to help. As I was impressed with the ‘Just Landed’ visualisation, I used a tutorial created by the same developer Jer Thorp. On his site I found a piece of code that simply searched for a key word and would display the last one hundred people that had tweeted it.

Twitter myTwitter;

void setup() {

myTwitter = new Twitter("yourTwitterUserName", "yourTwitterPassword");

try {

Query query = new Query("sandwich");

query.setRpp(100);

QueryResult result = myTwitter.search(query);

ArrayList tweets = (ArrayList) result.getTweets();

for (int i = 0; i < tweets.size(); i++) {

Tweet t = (Tweet) tweets.get(i);

String user = t.getFromUser();

String msg = t.getText();

Date d = t.getCreatedAt();

println("Tweet by " + user + " at " + d + ": " + msg);

};

}

catch (TwitterException te) {

println("Couldn't connect: " + te);

};

};

void draw() {

};

This then printed on the console the last hundred people that tweeted the word ‘sandwich’. To make my Artefact work I needed to adapt this to search for two parameters at once, i.e. both a location on the globe and a key word.

Interfacing

I needed a library for Processing to have input boxes and buttons to send information around the sketch.

I decided on a library called ControlP5 which I had used on a previous project for an interface that could pass data easily.

Picking Cities

When choosing these places, I had to be sensitive. This is because if I was searching for an English news story and I searched for it in English, not all languages would be able to understand so I had to pick places where English is a commonly used language. Based on this, I decided to use London, Sydney, New York, Los Angeles, Pretoria (South Africa) and Ottawa. I also included Rio de Janeiro, Berlin, Tokyo, Dubai and Cairo as English was either a second official language of that country or a popularly used one. I then used Google maps to gain the longitude and latitude of those cities and noted them down.

Design

After the technology was decided upon, I looked at the design. Going back to my idea for the project on visualising data on a global scale I felt having a map in the background was essential. Instead of putting a live map on the project, for example Google Maps, I decided to just use an image.

Since I was using Twitter to visualise my data, I decided that using Twitter’s own colours in my design was essential. I took the Twitter logo and directly copied the slight blue gradient from the bird on the logo and used it as a background for the countries. I then decided upon a black background behind it to contrast the lighter blue colour.

Using Trigonometry

After finding a tutorial on creating clocks in Processing..

http://processing.org/learning/basics/clock.html

..I discovered I was making the clocks the longest way possible. So using the tutorial I was able to create the clocks in a fraction on the time.

Plan for Digital Artefact

I have decided to create an interactive visualisation for my Digital Artefact and to use a combination of Processing, Twitter and a Processing library called Twitter 4J which will pull in data from Twitter to Processing.

My idea will be based on world clocks, but with a twist. Doing research, I found this image and felt I could do something with it. If I was going to see how popular a key phrase was in a certain place on the planet I thought using this format would look good. Instead of having the minute and hour hands represent the time in that city, I could have them represent how popular it was. For example a very unpopular search would make the clock be at a minute past twelve, however a popular search would make the clock appear to be half past eleven for example.