MTV VMA Twitter Tracker

For the 2011 MTV Video Music Awards, Shawn, Mike, and myself worked to make a real-time twitter tracker visualization. The site was split up into three views: Buzz, Paparazzi, and Hot Seat, each framed on top with an activity graph. The site’s front-end was primarily constructed in SVG, using the library D3, and using Stamen’s Eddy for the twitter-tracking backend.

The image above and below shows the Buzz view, the latter with one of the triangles selected. As one can see, the view is split into two representations, the left side being a fractal-esque placement of triangle-cropped photos, sized according to popularity. The right side is a more traditional list-view of the same information, showing each person’s rank and total tweet count. Clicking on either a triangle or a name goes into the selected mode (below), with an enlarged image, and a list of recent tweets sliding out from the right side.

Each minute, as new data trickled in, the triangles would slide into their new slots. The motion for these transformations was constrained to two vectors, at 60 and 0 degrees. These constraints gave the triangles the appearance of breaking apart in each transition, specifically at triangle-suited angles.

The second view, Paparazzi, used another fractalesque arrangement for displaying photos taken on the Red Carpet as celebrities came in. (This view shown below, in the mobile section) When the user clicks on a photo, it goes into another selection view (below) which shows the twitter icons of people that retweeted the photo in question. This was also the first view shown on television during the broadcast, with the retweeters named the “superfans.”

The third and final view was Hot Seat, which showed where celebrities were sitting in the theater, and showed pulses of activity as they tweeted throughout the show. Clicking on a seat pulls up the tweets in question.

In addition to the web, each view also had to work on iOS, TV, and on a rounded triangle screen within the venue. Shawn tackled the latter two, and I took care of the iOS views. Below are a couple screenshots to how each view translated to the small screen of an iPhone.

Here’s the Paparazzi tiling that I mentioned earlier – the black spaces are (sadly) due to the long time that it took to load all of the images on iOS as the event progressed.