Facebook Twitter

Computer Science, Undergraduate, Interaction Design Report, Queen Mary, University of London

  1. Read the task in Box 1.
  2. Download each of the pdfs and read them. Keep these open so you can refer to them as you watch the video.
  3. Watch the video.

Step 1

The Task

Computer Science, Undergraduate, Interaction Design Report, Queen Mary, University of London

Most practical work on a Computer Science course involves building programs to perform specific tasks, but as part of their third year coursework for the Interaction Design module, the objective concerns interest or aesthetics. Students are required to design and program a graphical visualisation of Twitter data.  This visualisation needs to highlight some aspect of people’s interaction on Twitter in an interesting or aesthetically pleasing way. The visualisation program itself and its source code are submitted along with a written report of up to 3,000 words. This report makes up half the marks for the task and needs to explain:

  • the main focus of the visualisation
  • how this was created and conveyed
  • how data was obtained and processed
  • how the visualisation differed from others on the same subject.

A successful report needs a good balance between (a) explaining the concepts, behind the student’s visualisation and (b) explaining the actual mechanics of how this visualisation was achieved.  In (a), the report should explain what the program application is, what it is supposed to do and why. The best reports relate the ideas for the program to the literature and material discussed in the lectures.  For (b), since the source code of the program is also submitted, there is no need for the report to describe the program flows line-by-line. Rather, it should describe the logical structure of the program; how it does what it actually does. This should be at a suitably high level, referring to the code itself for low-level details where necessary. 

Step 2



1 – Tweet-E-motion – Motivation.

The motivation behind creating a visualisation of Twitter was inspired through research into current visualisations and the lack of mood/emotion related visualisations. Through previous study, the lack of visualisation of moods and the popularity of using circles and bubbles in interactive presentation encourages the use of this popular visualisation technique alongside a rarely investigated area of interaction on Twitter.

2 – Tweet-E-motion – The aspect of Twitter being conveyed.

The main focus of the Tweet-E-motion visualisation is to represent the different moods that are being tweeted about. This therefore means that the aspect of Twitter that this visualisation is trying to convey is the overall interaction of users and their emotions at any given point. From the visualisation, we can easily see which cluster has more circles of a particular colour; therefore we can evaluate the general mood of tweets at any given time on twitter. Tweet-E-motion also allows users to see which are the most popular emotions being tweeted about, and evaluate this according to the time or occasion. For example, during Valentines Day, there will be more tweets to do with the emotion of love; this would be represented on the Tweet-E-motion visualisation programme using its popularly associated colour, red.

Download PDF

Interaction Design

A main idea behind designing the visualisation was for it to be a piece of informative art, this meant that it had been important for whatever was created to be continuously changing. Such adaptation would fit well with the nature of gathering tweets, this is because many people are constantly updating their twitter feed. So any changes being displayed by the visualisation would be solely determined by what kinds of tweets are being read in through twitter. The actual changes itself would gradually become apparent to users as they concentrated on the application, this was intended to be similar to day/night cycles or changes in weather that are present in some video games.

The changes in the programme were to be abstracted and not immediately recognisable to the user in terms of what kind of information it was conveying. Which meant that, rather than the program simply gathering a large amount of data and displaying it in something similar to a graph, it would instead use the data in a way that invoked thought from users. Meaning that someone would likely spend more time looking at this visualisation and trying to understand what it meant compare to a graph which would immediately tell users what the nature of the data was.

Download PDF

Visual Representation of Twitter Data: HashLinkz


This report discusses the implementation of my visualisation, Hash Linkz. Discussed are the points about the concept of interaction, how this is visually displayed, how the audio and visual aspects are configured, how the Twitter data is processed and how this visualisation differs from any other. Although there are dedicated sections for each, there is a quite a bit of material discussed early on that applies to the later sections.

Aspect of Interaction

The aspect of interaction represented in my PApplet visually is the relationship between a maximum of 15 tweets that are retrieved with the same query, if the tweets have at least one hash-tag. This is in the form of a cluster.

If the only relationship between a pair of tweets is the common-query-word, it is assumed that there is no relationship, because the relationship is considered extremely weak (Event 1). If one tweet is a retweet of another (either manual-retweet or automatic-retweet) it is clear that there is a strong overlap in the resident-words of the tweet so the relationship is strong (Event 2). Finally, if the tweets have some similarity (i.e. a subset of overlapped words) there is a stronger-than-weak relationship, however it is not a close match i.e. the tweets are not the same.

Download PDF

Step 3

Step 4

Download the transcript for this video.

Creative Commons Licence