End of Final Project

I believe the final infographic should be self-explanatory. It was ‘shrunk’ from a long scrolling one because there are 6 elements and the visual working memory cannot retain the context of the previous elements. From visiting a few advertising and PR agencies, they tend to print their infographics and attach it to the wall. This layout enables the brand to print it our physically and mount it on the wall for the social media managers to view and remind themselves. The digital version is also extremely useful because less scrolling is now needed and subtly grouped according to segments to improve understanding through such simple visual features.

This is the final infographic.

3229 GrpP Draft 3

Breakdown and explanation of individual elements:


  • This column chart provides the background for our brand, Brand 1 (henceforth known as “brand”) to show its current performance as it enters 2014.
  • We don’t see this often, but my group decided to use a range bar chart because it omits unnecessary information. Since we would be focusing on the growth numbers (in absolutes), then the size of the bar can easily depict the increase in numbers across the year.
  • As you can see, brand is leading the twitter social media race, but the others may be catching up.


  • Simple bar charts are used here.
  • This section is to show the “2-way communication model” performance through analysis of incoming and outgoing tweets. For those who are not in the know,
    • incoming refers to Mentions and Replies through the “at” symbol, i.e. @Brand1 and retweets simply means followers sharing our brand’s content;
    • outgoing refers to the brand’s social media manager(s) mentioning followers in tweets or directly replying them, and retweets refer to the sharing of follower’s content in the brand’s public feed.
  • We show this to suggest what other brands are doing effectively and hence to adopt their models to boost the brand’s image/no. of followers.


  • Simple line graphs to show trends.
  • Look at that inversely proportional trend! By first adding a time lag of about a month, a fast response rate attracts more followers – high growth rate – the next month, but due to that fact, the increase in incoming interactions cause the brand to respond more slowly. This in turn leads to a slower growth rate the following month.
  • We suggested that the brand should forecast spikes in follower growth and possibly activate more personnel to start responding to user queries. Interesting huh?


  • Personally my favourite. This is sort of an alternative heat map chart, and took me about 2 days to conceptualise this mode of presentation.
  • Why circles you ask, it’s because I initially experimented with squares (table form) and there existed the grid illusion. Not sure if the dark background changes anything, but I sure didn’t want to take any risks. This representation seems friendly and not too confusing, and the white boxes can be inferred to show the high concentration areas.
  • The socialbakers representative did mention that this was pretty interesting and may look to implement this! (woots)


  • We thought that this may be confusing because the data given to us was quite misleading. Column charts are used.
  • Top three tweets of the month was given in terms of retweet count and hence we would think that it wasn’t the fairest representation of the suggested course of action. Still, the numbers of retweets with visual seem to speak for itself.


As most other groups mentioned, not knowing the real brand had imposed much restrictions on how we could explore the data and the suggestions that we could come up with. It also leaves us clueless as to the trend changes throughout the year as there may be press events or promotional campaigns that may have affected the follower growth rate.

My finals words for this project would be “fun, but impractical”.

Here’s to exams and a great summer holiday ahead!

Samuel Cho.

Final Project (Week 4)

So after 2 presentations, we were pretty much ready. However, during discussion, we realised we needed to tweak certain graphs because it was either confusing, redundant or complicated.

The first major shift was to rearrange the “client specific” data to the bottom, as a concluding part. This was because we needed the other segment’s data to set the foundation, the ground for the basis of our suggestions to the client.

There were a couple of drafts I’d created as shown below. We thought that a long running infographic was really good and the dark background with light coloured elements would look more professional and engaging.

3229_Proj_Concept  3229 GrpP Draft 2  3229 GrpP Draft 2 NEW AGAIN

Taking a look at thumbnail, we changed the circle charts because they were misleading and hard to perceive difference in percentage values. A pie chart was also definitely not a choice as it was percentage growth and not percentage of market share. The development process of the time chart was the tricky one.

Using values of 1’s and 0’s to indicate the high engagement days/hours as provided in the data, I ran the data through Tableau and found out there were no visualisation options. Resetting the sheet, I enabled the table display to try to manually colour code it. Little did I realise that I could change the shapes of the 1’s and 0’s and the colour as well! Take a look below.


I further refined this in powerpoint and created a draft of it in Photoshop.

The four individual parts are as follows:


The text is not visible because it is transparent and meant to be viewed on a dark background. Apart from visualising the data, our project was geared towards coming up with strategies and suggestions, therefore I drew a white box across the areas with high engagement-saturation as seen in the infographic draft above. Our group were really quite satisfied with how everything turned out. We had some suggestions form the floor and Jana to refine our infographic and will be posting it once the project is completed.


Final Project (Week 3)

This week, we had to present our project in a dry-run. I assembled points and imagery from Google Docs to create a black-blackground powerpoint slide. Apparently black backgrounds were trending and I just decided to hop on the bandwagon. This increases the luminance contrast ratio and helps everyone to focus on the content.

Our confirmed tasks for Project 1 was:

Universal Task:

  • What can Brand 1 leverage on to increase customer engagement and follower growth?

Task 1: Analyse Twitter feed for Brand 1 to utilise it more effectively (Client Specific)

  • What is the best time to tweet (day + hour)?
  • Is tweeting visuals advantageous ?
  • Comparison of number of followers of client’s US account vs number of followers of client’s global account

Task 2: Compare brands across months to spot interesting trends (Segment 1)


  • Comparing followers in confectionary business (segment 1) vs competitors
  • Global brand establishment vs US brand establishment
  • Brand comparisons based on quarterly growth (every 4 months)
  • Outgoing Twitter interactions vs incoming Twitter interactions

Task 3: How to support/increase follower growth (Segment 2)


  • Does posing questions increase engagement leading to follower increase?
  • Does engagement (like retweets/replies/mentions) increase follower growth?
  • Is there a relation between no. of questions asked and response time to questions asked?

The visualisation of Segment 2 is here as it is the largest data set (credits to Kevin): http://public.tableausoftware.com/views/Segment23229Project1/FlippedResposeRatevsGrowthRate?amp;:embed=y&:display_count=no

This was the infographic concept (pre-creation).



The idea was to make a long, scrolling infographic to present one set of information at a time, in a glance.

Final Project (Week 2)

This week we had to come up with three tasks for the entire Project 1, however the first issue we encountered was the data being in three different sets.

If the data was based on three different data sets, it was going to be immensely difficult to come up with three universal tasks. We then decided to twist the paradigm a little and create 1 universal task for Brand 1 and then many sub tasks so that we can pick from. The initial data that we were given was sparse and only enough to create a simple inforgraphic without much analysis at all, so we requested for more data. We were then presented with the “extended metrics” for the brand. However, with more data, the metrics actually made it harder to link anything together.

Our resident data analyst Kevin decompiled the data into individual sheets and ran the data through Tableau and all we got was a set of complicated graphs that had seemingly no correlation. This was a problem we definitely could not solve in the span of a 1.5 hour lesson and therefore we proceeded with drawing a schematic of how the infographic should look like on paper.


We had some brainstorming about the types of charts to use as well and a little on the visuals as well. The idea was to make it all simple, accessible and very comprehensible.

Therefore initially we wanted to place segment 3 on the top, because it had some interesting data that was not often visualised, like the highest engagement days of the week and hours of the day. There was also the opportunity to place some twitter visuals to illustrate our point. Segment 2 was next in line, because there was quite some interesting trends to be plotted. We thought we would show the entire graph and then use a zoom-in approach to help the user focus on the important segments which epitomises the trends. The last segment, 1, was quite self explanatory and could serve as the concluding idea about the brand and how the previous segments could be related back to its brand activity on social media.

The project looked REALLY promising at this point of time and we were quite excited to further develop this infographic for the final presentation!

Guest Lecture: Yahoo Research Labs

This was really an intriguing session as presented by a representative of Yahoo! Research Labs who was visiting Singapore. As opposed to SMART (Singapore-MIT Alliance for Research and Technology) last week with video and 3-D interactive visualisations and presentations, Yahoo! has got its staff to take a more traditional approach in analysing the data.

What data?

“Visualising 12 million photos”

With the acquisition of flickr by Yahoo, the research labs team have been finding ways, methods and algorithms to try and make trends, notable or observable peculiarities and other significant findings with the user uploaded photos.

The first takeaway I’d gotten was that social media and geotagged data are REVOLUTIONARY. I really mean REVOLUTIONARY. It bypasses state and computer logic to create what people are used to calling – crowdsourced data. The example he quoted was the ‘town’ La Lengua. The story begins with a masked-burrito and resulted in a new town being created out of nowhere through the manual editing of geolocation data which was then uploaded onto flickr and crawled to improve maps such as foursquare and Google Maps. It’s like saying “hey guys, let’s rename the centre of Singapore to something cooler”.

I feel that the possibilities are endless but at the same time, highly exploitable if members of the public were to know how to coordinate such a thing.

It was also mentioned about the different ways people take photos of landmarks around the world which coincidentally support the Rule of Thirds known in photography. Who would’ve known?

Another point he drove home is that technology generates a WHOLE LOT OF DATA. We have to come up with ways and think out of the box in order to harness it. A single photo taken with a camera phone, digital camera or a DSLR generates tons of data (i.e. Histogram, geolocation, model number, shutter speed, flash information, … the list goes on).

An interesting thing I discussed with him was what were they going to do with Tumblr now that they’ve acquired it as well? That is to be left for another day, perhaps, as they are still running tests, algorithms to find out links between re-blogging, liking and creating – CREATION vs CURATION – which is another phenomenon that piques my interest.


In-class Thought Experiment

The question posed was “If you were to be hypothetically provided with photos and all its data, what kind of ‘question’ would you come up with and how would the visualisation look like?”

5 out of the 7 groups in class decided to use a map to come up with interesting visualisations. The groups questions included

“What are the food habits of Singaporeans?”,

My Group

My Group

“Human-geography trends in Singapore over time”,

“Time difference between photo taken and upload time”,

“Where can you find good places for Light Art?”,

“What are Singapore’s most photographed colours?”,

“What do Singaporeans do over the weekends?”.

The group that did ‘most photographed colours’ really caught my attention because finding trends with colour is really unique and it is something I fundamentally enjoy engaging with! The world of colours is infinitely complex, bizarre and mysterious…

I felt that all groups had one thing in common: although given an abundance of data (hypothetically) we were bounded and restrained by the effectiveness in visualising it in which everyone had reduced the number of variables to an average of 3. This further reinforces what we have learnt in the past weeks, where it is important to show relevant, not redundant data; or to put it simply – data that can be made sense of.

After these two guest lectures, I feel really excited for the industry of data visualisation and more so in knowing that in this Age of Information, there are now ways to sift, filter and understand data from all the scattered ‘information’.

Final Project (Week 1)

Groups were formed today, albeit with scarce class attendance..

The key interaction I had with my group mate was choosing between Project 1 & 5 which are re-imagining of an infographic and of a dashboard respectively.

The session was a discussion to do Project 1, which was mainly a re-visualisation of the data metrics that was already organised for us. However, we are to come up with 3 better tasks in order to present a fresh take as students. Although it feels like merely a visual design task, I think the project is still quite challenging as we now need to take the academic framework and help to improve something for the real world, and real clients.

Lecture 7 Exercise

For the class exercise that happened in Week 7, Friday, I did not foresee a debate coming on in the discussion: differentiating between a data visualisation and an infographic.

We were presented with a bunch of images and asked to develop criteria and to classify these images, and also to identify those that do not fit snugly into one category or the other. That said, my group had differing opinions, but we compromised on certain ‘points’ instead of hard criteria to differentiate between the two.


  • A visual representation of data or (a set of) numbers
  • It is largely uninterpreted by the designer
  • It encourages explorative analysis of the data
  • Find/draw trends/stuff besides the main idea or point





  • Has a larger graphic design
  • It is mostly interpreted by the designer – it presents the highlighted data smack in your face
  • It is conclusive, relevant or important and highly comprehensible
  • Tells a story in context (usually with multiple elements)
  • Has a leading (primes for exploration within context) title, instead of merely the title of the data set





  1. It leads you to explore & relate to other chunks of data (Characteristic of data visualisation)
  2. It tells a story, often sequential (Characteristic of an infographic)
  3. An example here would be the “best visualisation that was ever made” quoting Tufte.




Other groups had pretty decent criteria too.

Group A

  • Structure/Non-structure of the infographic
  • Context
  • Focus
  • Level (Depth?) of information

Group B

  • All infographics contain data visualisation(s)
  • Data is complementary, supplementary, more focus, attention or has additional background information
  • Presence of call-to-action
  • Allowance/leeway for interpretation (Data visualisations don’t have different perspectives) – This point is in conflict with my group’s

Assignment 3: Tools

The main task for this assignment was more of technical one.

The initial task I thought of was that to use the data across French Fries (considered fast or junk food) to assess if what is would have any trends to show that it has benefits of sorts.

I picked 4 tools to use eventually, but was actually only doing 2 in actuality.

Google Fusion Tables and Tableau allowed me to work with the data and filter only what I needed whereas the other 2 could not.


Google Fusion Tables

GFT had some cons:

  • Limited viz options
  • Not much chart settings
  • Cannot export image/pdf & not for print (mainly web display)

GFT pros:

  • Tabbed interface; able to filter data
  • Good sorting options
  • Simple UI

Using GFT, I was able to find out that for all other things similar (namely the energy), there were no-salt alternatives (low in sodium) which makes French Fries less unhealthy in some sense.

However, the some classmates provided feedback that I was comparing supermarket versions of uncooked and unprepared fries with the likes of those from fast food chains like Wendy’s and McDonald’s. In my defence, I was only comparing Energy and Sodium which isn’t directly linked to deep frying frozen french fries. Of course, it was paramount that this detail was noted and adjusted accordingly later.


Tableau Desktop

The cons:

  • Hard to learn and use (category and value is known as dimensions and measures respectively)
  • Cannot export image/pdf directly (locally), and not for print

The pros:

  • Drag & Drop
  • Simple visualisation recommendations (largely automated)
  • Many minute settings and can filter data
  • Almost limitless variables
  • Tabbed working interface with ability to make dashboards


Many Eyes

Was not able to filter data within the software/application/online service and therefore no conclusions can be drawn. Non-conventional uploading of data into a textbox, not with csv or excel sheets.



Don’t even try this. I believe it is meant for final level/stage visualisation and not meant for working with large data, at least for beginners. Would call it “visualisation software” rather than “data visualisation”.




¶ Time Skip – Moving on to the later stage of the assignment ¶




With the known issues in mind, I had manually filtered out the data and relabelled them from the data set.

I intended to focus on both French Fries and Ice Cream (since both were typically unhealthy foods)

Assignment 2: A Tour

So Assignment 2 came out, and finally everyone is on some common ground. We were asked to use the data from QS World Universities Ranking and formulate a question or a story to tell in an infographic piece.

  • Other than the provided piece of data for 2012/2013, the rest of the data was extremely hard to get
  • 2010/2011 data was only available in the supplementary PDF FILE which had to then be manually typed and compiled into another Excel sheet.

After hours of wrestling around with the data (read: Rankings of top 125 universities in 2013 with their rank progress since 2009) in Excel and Tableau Public, I decided to explore the prospect of the fastest rising universities in that 5-year time frame. One could even say I am taking the sociological approach by supporting the underdogs, but hey, whatever works right?

Initial intended layout

This was my intended layout at first because the graph rendered by tableau was of a very low resolution, so I had to limit its size across the page which created a large unused white space. I filled it with a grey box for future purposes.


Draft 1

This is draft one. Firstly, the topmost graph was an epic fail. I did not know how to combine the years together because learning tableau is a b*tch. However, making do with whatever I have, I made each column separate so that I could compare it with the chart below. However, this relationship was not exactly evident/visible.

It shows the 9/125 universities which have had large increases in rank from 2009 to 2013. I then isolated them and used colour intensity to label the net amount of change. The chart below shows a glimpse of why these universities have improved in terms of faculty to student ratio and academic reputation, both of which have a high contribution to the global rankings (20% and 40% respectively). Another point to note is that I chose these 2 factors because they are malleable (able to be manipulated through PR, publicity, hiring more faculty staff).

Although I colour-coded the text to correspond to the graph, it was still confusing to many.

The right column also seems to draw attention away from the main gist of the article as it has bold colours and large type. The removal of it was suggested during tutorial, and the text between graphs to be shifted below so that the correlation between graphs can be easily seen.

ALAS, after experimenting with different visualisations, I decided to go for the safer one – Time against Rank with colour-coded Institutions. Even after so long, I still think Tableau sucks as you have to learn how that crappy algorithm plots your crap together instead of being a WYSIWYG.

Sheet 1 Dashboard_1 (1)

Interactive version: http://public.tableausoftware.com/shared/FSCTQ3KPD?:display_count=no 

As you can see from the images above, I finally got my hands on the datavis output I intended to show. Therefore, after some assemblage in Illustrator (o m g vectoring is a waste of time imho) this should be my final piece!

Semi-Final Draft

Semi-Final Draft

Andddd….. Presenting my final piece.


To sum it up:

  • Number of institutions from 800+ to 125 to 9 to 3 featured
  • Flashy headline
  • Focuses on universities with an upward trend

Assignment 1: A Walkthrough

And thus I embarked on Assignment 1. When I first loaded the website, I could’ve sworn it was in an utter MESS. There was so much data to begin with (not to mention the fact that it was already in a visualisation in itself) and we had to pull out certain data to make an infographic.

It had to be a confirmative analysis (confirm or infirm hypothesis or structural relationships between data) piece of work and needed to be time-based.

With this in mind, I gobbled up all the data and let it sit inside my head over a few days, turning it about mentally and finally came up with a linear, “timeline”-esque infographic which was only in black and white. It took me approximately 5.5 hours in illustrator to create draft number one.


Draft 1

Allow me to explain:

  1. I only drew data from the timeframe of 1950 to 1974 (as stated in the infographic)
  2. I wanted to make it visually comparable with respect to the previous, hence the small column per milestone
  3. I added descriptive text to each column, to name and elaborate on each element
  4. Grey boxes were added to group certain time-periods to vaguely classify and clump some of them together
  5. Some information (or lack of complete data) was omitted
  6. Colour was left as black and white to prevent any elements from receiving undue focus or recognition but in the end it turned out like a huge chunk of data (i.e. poor data-ink ratio)

As I proceeded to draft number two, based on suggestions by my classmates and my tutor, I decided to add colour to the entire chart and rearrange some graphical elements.


Draft 2 (with colour)

  1. Computer was tilted to create a “pop-up” effect with description added
  2. Desaturated colours were used to group the “sub-eras”. I have my doubts about the data-ink ratio now?
  3. An information textbox was added to show why is this data significant & the story it is supposed to tell
  4. Weird professor vector was added to make the infographic seem a little more playful and to cater to a larger audience
  5. All blurry JPEG images used were re-vectored and coloured to give a consistent aesthetic to the piece

Still thinking it needed refinement, I proceeded to make draft number three.


Draft 3

Draft 3 seemed like it now had too many colours and the user would get confused with what to see and why it is relevant, therefore Draft 4 is my final piece.


Draft 4 (Final)

I asked myself what would be negligible if removed, and the computer was taken out. The circles were shrunk a little and opacity reduced (Thanks, Jaime!) to give some legible white space around and the title was reworked to make it less ostentatious, since there were already so many darn shapes around.

Also, something I hadn’t elaborated was about the last column, 3-D Visualisations. I intentionally made it extend out of the defined space to give the visual effect of 3-Dimensions, i.e. occlusion to show the foreground depth of the idea being conveyed.

Also, British spelling of “visualisation” because WE’RE BRITISH AND HAVE BRITISH COLONIAL MASTERS. TAKE THAT AMURECA