Canvas Timeline: Hunger Games Twitter Abuse

Canvas Timeline: Hunger Games Twitter Abuse


The film adaption of the popular book “Hunger Games” premiered in the US in March 2012, and later on in the UK. I had seen the trailer and press promotion for this movie, and was mildly intrigued as to what it was all about, being a little surprised when my Google Alerts email had a link to a article about one of the young actresses on the show suffering abuse on Twitter.

Upon invesitgation, I found that a controversial Twitter and web storm had developed:

On Tuesday, February 28th, a twenty-nine-year-old Canadian male fan of Suzanne Collins’s dystopian young adult trilogy, “The Hunger Games,” logged onto the popular blogging platform Tumblr for the first time and created a site he called Hunger Games Tweets. The young man, whom I’ll call Adam, had been tracking a disturbing trend among Hunger Games enthusiasts: readers who could not believe—or accept—that Rue and Thresh, two of the most prominent and beloved characters in the book, were black, had been posting vulgar racial remarks.

He soon began poking around on Twitter, looking at tweets that incorporated hashtags—#hungergames—used by the book’s devotees. Like the conversations found on message boards, some of the opinions were vitriolic, if not blatantly racist; unlike the postings on fan forums, however, the Twitter comments were usually attached to real identities.

“Naturally Thresh would be a black man,” tweeted someone who called herself @lovelyplease.

“I was pumped about the Hunger Games. Until I learned that a black girl was playing Rue,” wrote @JohnnyKnoxIV.

“Why is Rue a little black girl?” @FrankeeFresh demanded to know. (she appended her tweet with the hashtag admonishment #sticktothebookDUDE.)

Adam decided to create a Tumblr blog that documented this racial abuse on his website:, and was soon innudated with submissions of more tweets, which he documented, and others began to document across different social networks like Pinterest and

This inspired me to start harvesting tweets in relation to this topic so that I could somehow create a Canvas HTML5 timeline of how this issue has evolved across the different social network platforms. The timeline draws the tweets and related social network activity onto a blackboard, an idea borrowed from and inspired by the Thomoson Scroll down to see the my animated version of this below.


I first use Google Spreadsheets to do a Twitter scrape over the period of 2 months that covered the end of February to April, and harvested these tweets so that I could later analyse them:

I also used Hawksey’s Yahoo Pipes harvester and a Scraperwiki python and php script to harvest information from both Pinterest, and Youtube. See a screen-grab of the results from my Pinterest Scraperwiki below:

I then looked around for alternative ways that I could visualise this data.  The HungerGamesTweets website already had quite an impressive collection, and I tried visualising my harvested data by using the Timeline app, as used in my #ididnotreport article, which you can launch by clicking on the image below (there have been some issues with the timeline crashing, so my apologies for this – please read further for the new Canvas timeline I created below):

However, I was also curious o see how far I could push my programming skills to create an alternative timeline with a combination of Canvas, CSS and the utilisation of the data I had already collected. In my search of data visualisation blogs, I came across the “Fuel for Your Mind” blog, which showcased the Thomson Timeline showing “The Evolution of Western Dance Music”:

I decided to pick apart the code used in this interesting app, and see if I could use it to visualise my resulting timeline below:

First I picked apart the .js files, zeroing in on the code that arranged and labelled the circles in the timeline:

Then I arranged the key trending words from my data into different genres:

Then I worked on how the line arrays were drawn:

Then the labels that would appear on the Canvas slider at the bottom of the timeline:


And finally how the logo and colours of the circles at the bottom would appear:

The result is this timeline, which shows how in my small sample of data, the twitter hashtags, links to and from Pinterest, News, Video and blog and  sites interacted with each other. The larger grey bubbles in the background show which parts of the social network sphere news reports and hashtags were reported. The coloured lines show how each hashtag, news report or key word was linked or trended within or across networks.

Please click on the image below to launch the animation or here for the full version:


1 Comment

Comments are closed.