The shooting of Mark Duggan on August 4th sparked a series of riots first in Tottenham then across England. The Guardian let you follow their spread on an interactive timeline that shows the most important incidents and how they spread over the different neighborhoods. The user can scroll through a 3D timeline and watch how the riots unfolded. Every event is marked and linked to the belonging article.

From the same team of The Guardian comes another visualization, showing the traffic on Twitter during the riots. The Guardian has compiled a unique database of more than 2.5m tweets related to the riots, showing how Twitter activity explodes after every reported event.

Introduction

We were asked by the National Geographic Channel to visualize the history of the National Geographic Bee Contest. They provided us with a dataset containing detailed information about the finals ranging from 1989 to 2011. Our task was to make this data explorable and entertaining for their online readership.

The Geo Bee Story

Every year thousands of schools in the United States participate in the National Geographic Bee using materials prepared by the National Geographic Society. The contest is designed to encourage teachers to include geography in their classrooms, spark student interest in the subject, and increase public awareness about geography. Schools with students in grades four through eight are eligible for this entertaining and challenging test of geographic knowledge.

Exploring the Data 

At the start, we analyzed the data to get a feel for the content we had available. We had to decide which data we would use and which combinations would add the most value for the user.

Unfortunately the data wasn’t completely consistent (more on that later), so we looked which facts were available for the whole time period:

Based on this, we started to build up the story we wanted to tell.

Telling a Story

Defining and knowing the story you want to tell is one of the most important steps in making a successful visualization. Thus, instead of trying to visualize every last detail, we narrowed the focus and formulated our story as a question:

“How did individual U.S. states perform compared to each other over the last 23 years?”

It’s one question, but it has three aspects: geography, rank, and time. We didn’t want to tell a linear story, but let the user explore and discover.

To find the appropriate form to visualize the data, we sketched different models and tried to bring them in a suitable form that is easy to understand and invites the user to explore in a playful way.

We decided to go with a triad of visualization methods, each of which answers one aspect of our main question.

Each part of the visualization (rank chart, map, timeline) is interactive, and if a selection is made in one, it affects the other two. The user can dive in at any point she’s interested in.

As a bonus, to make the topic of the contest more tangible and challenge the user in a fun way, we included each year’s final question as a small quiz. Clicking on the question reveals the answer (hey, no cheating!).

The final visualization consists of four views:

All Years View: This is the starting view. It shows a summary of all states in all years.

State Focus: When the user selects a state, its position in the overall ranking gets highlighted, and its rankings in each year get displayed color-coded on the timeline.

Year Focus: When the user selects a year, the top ten states get highlighted and color-coded according to rank on both the map and the ranking. The final question of the year appears.

Answer View: The answers are separated from the visualization and appear only if the user wants to see them.

Shaping and Visualizing the Data

The original data we got wasn’t a database or even an Excel file, but PDFs and Word documents which looked mostly like this:

After fooling around with OCR, we quickly realized it wouldn’t work, and decided that we’d have to transcribe the files manually. We prepared an Excel template and outsourced this task to a relative with great typing skills. After a few days, the first transcriptions came in, and we could have a closer look at the data.

With the help of Google Refine we discovered and cleaned up the typing errors and data inconsistencies (e.g. differing name spellings). As we intended to use the state names for the visualization, it was important that they were consistent. Not only students from the 50 states can participate in the contest, but also from US territories and Department of Defense schools in foreign countries. Using the USPS list of state and territory abbreviations as reference, we brought the state names into a form which we could later parse reliably.

At this point, we had a set of cleaned up data, exported from Refine in JSON format. But before we could actually visualize it, we had to perform a few additional steps (for which we wrote a Ruby script).

• All excess data which we didn’t need for the visualization (street addresses, grades, etc.) had to be removed to save space.
• The data had to be restructured, so it could be understood by Flare, the visualization library we used. For this, we created two new data sets, one grouped by state, the other by year.
• Since we wanted to create an overall ranking, we had to calculate a score for each state, based on its performance across all years. Here we used a scoring system similar to the one used in Formula 1 (1st = 10pts, 2nd = 6pts, 3rd = 4pts, 7–10 = 2pts, finalist = 1pt).
• At the same time we generated a few statistics for the data and ran some checks to make sure there weren’t any loose ends.

Also, since we used Flex, we wanted to avoid any woes with loading data from an external file. So we didn’t export the data as JSON, but directly generated an ActionScript class with data objects inside. In the end, we’d get a single, independent SWF file. (Yes, this could also have been solved with Flex embedding, but it was more straightforward like this.)

We used Flex and the Flare visualization library to build the visualization. The two major points that influenced this decision (instead of building something SVG- or Canvas-based) were browser compatibility and ease of deployment. We didn’t know in what environment the visualization was going to be placed, so going for a single SWF with no dependencies dramatically minimized the conflict potential there.

Describing the coding of the visualization is beyond the scope of this article, and would probably be better placed in a tutorial (if anyone’s interested in Flash tutorials these days).

Discussion & Outlook

Our main goal for this visualization was to come up with an interactive data graphic, which gives the user some essential and basic information about the Geo Bee contest over the past 23 years in an attractive way.

We created a visual landscape which allows the user to focus on different aspects. To achieve this, we looked for different patterns in the data to make accessible and understandable. The user can switch between an overall state ranking, a state map, and a timeline.

One of our favorite features is the addition of the final questions and answers. They enrich the visualization with more content and give the user an idea about the level of difficulty of this contest.

The visualization we created can stand by itself because it only tells one story focused on the ranking of a state in comparison to the others and how it performed since the beginning of the contest.

It could be interesting to extend the visualization with more parameters and explore the dataset from different perspectives. Another story could tell more about the individual contest participants, what a student’s performance during the contest was, or what she has done after the competition. The visualization could also picture the participant’s career and show how Geo Bee can change your life. This would be a more emotional and personal, but whole different story.

Don’t forget to check out the interactive visualization!

For an article about Sweden’s most famous statistician Hans Rosling in Google’s “Think Quarterly” Magazine, Moritz Stefaner has remixed two of the famous Gapminder bubble graphics. The project was commissioned by The Church of London, the creative minds behind the limited-edition book and the companion website.

About Think Quarterly

The publication is curated by Google UK and is aimed at Google’s partners and advertisers. Nonetheless, the well written content makes the first issue a good read for all folks interested in how data is re-shaping business.

In a world of accelerating change, we all need time to reflect. Think Quarterly is a breathing space in a busy world. It’s a place to take time out and consider what’s happening and why it matters. Our first issue is dedicated to Data – amongst a morass of information, how can you find the magic metrics that will help transform your business? We hope that you find inspiration, insights, and more, in Think Quarterly.

The visualizations

Fertility and life expectancy is a condensed, and static version of one of Gapminder’s famous animated “worm” graphics. Among others, it shows how Vietnam is today on the same level as the US in 1980 with respect to the fertility rate and life expectancy. Scaling the diameters of the circles according to the years, and then connecting them, induces a sense of motion over time, even in this static image.

Child mortality dramatically shows how Bangladesh manages to reduce its child mortality with a rate faster than Sweden ever did. In the background, the mortality rates of all countries are plotted in light grey lines, in order to provide a sense of the density and distribution of the data over the years. Note how measurements seem to fluctuate strongly before the 1950s.

While we compare the two versions, it’s important to keep in mind that the original visuals are embedded in the powerful interface of the GapMinder and thus may seem a bit more complex. I think Moritz explains the changes over time with his static versions in a clear and elegant way.

Two visualizations strive to shed light upon the Egyptian uprising that began on 25 January 2011 and demanded the overthrow of the regime of Hosni Mubarak. While they take a different view, both pair the happenings with the reactions of people on the web.

Internet Traffic Timeline

The team of Chartbeat have put together 2011 Egyptian Revolution, a timeline view on the explosion of internet traffic during the revolution. The data driving this visualization is concurrent traffic on Al Jazeera’s english website, which was one of the most important sources of news about the revolution in Egypt.

The 18 days of the revolution are shown on a horizontal timeline and the traffic is shown as a time series for days with major happenings. As a descriptive addition you can toggle important events during the day to see the resulting traffic spikes. The visualization is built using purely HTML, CSS and a little Javascript and is also available as a static PNG version.

Retweet Network

André Panisson used Gephi, an open source visualization application to visualize Retweets with the hashtag #jan25 posted on February 11 2011 during the announcement of Mubarak’s resignation. Nodes are Twitter users, and the edges represent a retweeted status update. In the time lapse video below, we can clearly see the massive amount of Retweets spreading right after the announcement.

As a fun fact, André explains that the data set came together by chance:

I tried some interesting hashtags to see it working, and at the moment #jan25 seemed to be an active hashtag. I let the application run for some time, adjusted some parameters for visualization, and at some point there was a burst in the activity. I didn’t understood what was happening until I checked again my Twitter account and realized that the Egypt’s vice-president had just made the resignation announcement. After it, I proceeded collecting data, and the final result was this network. It was very interesting to see, in real time, the exact moment when Tahrir Square, from a mass protest demonstration, has been transformed in a giant party, and the burst in the Twitter’s activity. It was like covering in real time a virtual event, a big event that was happening in the Twitter virtual world.

Read more about the visualization and download the dataset that drives it here: The Egyptian Revolution.

http://www.youtube.com/watch?v=2guKJfvq4uI

The hard facts are given: A team has 11 players, the ball is round and a match takes 90 minutes. But what happens in between? We’ve compiled a list of applications and visualization that strive to provide insights into the FIFA World Cup 2010.

World Cup 2010 Calendar

The World Cup 2010 Calendar by MARCA.com is an interactive schedule for the tournament. You can access information by national team, group, stage, stadium, city or date. Once you hover over a wedge, June 14th for example, you see all the matches that take place on that day (Go Cameroon!). The visualization does not provide any deeper insight that the end result but the matches are linked to the coverage on MARCA.com.

2010 FIFA World Cup South Africa Game Tracker

Similar to the above mentioned schedule is the Game Tracker by Bristol based digital design studio Positive. It shows the upcoming game dates and results for past matches. The visualization is built in Flash and you rotate the circular schedule with simple drag & drop gestures. Again, not much insights about the matches, players or teams.

FIFA World Cup 2010

VisualSports has created a dedicated page for the World Cup matches. Every match for the group stage can be found in a table sorted by grouping. You can analyze the past matches with a visualization showing all cards, shots and substitutions that happened.

Twitter.com/worldcup

Another dedicated page comes from Twitter: You can “view” past and upcoming matches, which means that you get two parallel Twitter timelines with mentions of the playing teams. Honestly I don’t get much information out of this one.

Total Football 2010

With Total Footbal 2010 by Colm McMullan match analysis comes to the iPhone. For current and past matches the application offers different visualizations to dive into the data. The visualizations show information like the influence of each player, passes, placements of shots, tackles, clearances, fouls and so on. All match data updates in real-time. Of course the usual match stats like goalscorers, substitutions or cards are included as well.

World Cup Data Visualiser

The London based design & development studio Mint Digital comes this concept for an iPad application. It combines the football data from Picklivewith fun and intuitive analysis tools. For example, it allows you to compare cumulatively, or per match, all footballers in the World Cup across a variety of stats like goals, shoots on target, tackles and more. I haven’t found anything about the progress of this but they seem to have a working version of their Hamlock framework without the need of Flash which is apparently a necessity to run in on the iPad. See more images onFlickr.com.

World Cup 2010 Twitter Replay

The Guardian also leverages Twitter data to create the World Cup 2010 Twitter Replay application. It’s basically a timeline based visualization that represents Twitter hashtags as a bubble chart. On the timeline you can see important actions during the game like cards and substitutions.

Live World Cup Match Tracker

The New York Times uses a custom Flash application to support coverage of past matches. It’s a small little widget but filled with important information. A match can be analyzed in different ways to focus on ball posession (bubble chart), passes (lines) and area of play (heatmap). Shots are shown as cicles below the timeline. You can skip through the whole game by switching between notable actions. I think the NYT wins this round in regard of data density (and in my opinion also in regard of visual aesthetics).

I believe there are tons of other visualizations out there — if you come across something interesting, please let me know.

Via Infosthetics & FlowingData

The folks over at guardian.co.uk have produced an interactive visualization of the past decade. With an intuitive interaction model and an nice fullscreen version, the biggest stories from 2000 to 2010 come back to life.

The stories are lined up in chronological order and color coded by year. Selecting a thumbnail reveals more information about the storie like the date and a short headline. A link to the full story is provided as well. For a quick journey through the past I recommend the fullscreen version with keyboard navigation. Unfortunately they left out some key functionalities like jumping from one row to the other. Nonetheless give it a spin.

Peter von Stackelberg designed this complex timeline of social, technological, economic and political events and trends from 1750 to 2100. Each time series shows graphs, events and categories on a common scale.

The purpose of the timeline is to provide a visual tool for looking at events across a relatively long period of time and identify patterns and interrelationships involving a broad range of factors. Identification of patterns is particularly important when attempting to look at the future of complex social, technological, economic, and other systems.

Some thoughts behind the design process.
Stephen Lark uploaded a zoomable version to Zoomorama

The visualzation is based on the “Theme River” visualization method we’ve seen in the Last.FM Visualization for example. Now instead of a linear timeline, Irene “wrapped” the graph around the 24 hour clock. This makes sense as the data represents only average numbers for any day.

Speaking of the data, here’s how to read the visualization:
The length of a wedge represents the amount of passengers per hour. So, it comes down to comparing the length of the wedges to see where and when more people pass a station. I have to say that comparing bars that are ordered around a circle isn’t the most intuitive way to compare their length.

The application lets the user choose between the different transportation lines or view them altogether. After clicking on a wedge a bar chart appears that displays the absolute numbers thus making comparing much easier.

The project was released as part of the Visualization Challenge by the Executive Office of Transportation. SVG is used to visualize the data with the help of Raphaël JS. More information can be found on the project website.

To clearly illustrate the differences, the graph doesn’t simply gets highlighted. Instead the selected graph moves and changes its shape, thus making it easier to see the actuall movement. If a curve with abnormal values, higher or lower than the majority, is selected the grid adapts and scales down or up.

Excellent piece of work on the interaction model as well as on the visual aesthetics.

PaperCube lets the user browse the data of CiteSeerX (Scientific Literature Digital Library and Search Engine) using different views. The user can view Papers in a circle visualization focusing on the interlinkage of papers. A Treemap-type visualization shows citation or reference hierarchy and so does the papers per year but the later adds a chronological context. To get detailled information about a specific paper PaperCube provides a detail view complete with Abstract, references and citations.

The application is built as a RIA using HTML, CSS and the Sproutcore JS framework and runs in all the modern web browsers. You can give it a spin on papercube.peterbergstrom.com.