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 GE, Lisa Strausfeld from Pentagram shows with the CFO Outlook Survey how financial executives view the world today and their outlook for the months ahead. The visualization illustrates the opinions of CFOs from middle-market companies with revenue between $50 million and $1 billion about Food, healthcare, Manufactoring, Metals, Retail, Technology and Transportation.

With a vertical area chart the answers to a series of questions are ranked from pessimistic on the left to optimistic on the right. Layering the different industries shows specific spikes that differ significantly from the average. This may not be the most precise method to show the results as we can’t clearly compare the values. I like the drill down aspect of the visualizations — you don’t see the question itself in the overview but get an idea about the general topic.

GE has published the submissions to their recent Ecomagination Challenge. Instead of an ordered list, they created an interactive visualization that allows a more playful way of browsing through the submitted 2000+ ideas.

The Challenge

GE’s Ecomagination Challenge is a $200 million call to action for businesses, entrepreneurs, innovators, and students to share their best ideas and come together to take on one of the world’s toughest challenges – building the next-generation power grid to meet the needs of the 21st century. Learn more here.

The Visualization

All submitted ideas are plotted as dots on a map with concentric rings, similar to tree-rings. The earlier an ideas has been submitted the closer it is placed to the center. You can interact with the map to see all ideas by spinning the circle around. The dots are scaled based on reader votes and they are surrounded by a halo that represents the amounts of comments. Ideas are color coded by category (Create Power, Connect Power and Use Power) to help you skim through the visualization.

To get more information about an idea, you can select it and you get a small preview. On the linked project page you can see the complete description, vote and comment on the idea.

For this year’s MTV Video Music Awards, the music channel collaborated with Twitter and the good folks at Stamen to track social media activity throughout the event. The MTV VMA Twitter Tracker ranks the participating artists based on the amount of Tweets per minute. The application offers three different views on the incoming Tweets, All Activity, Top 4 and Single Artist. The user can tweet directly from the Flash based application to support his favorite artist.

The application is solely focused in the amount of Tweets does not go into more detail about location or sentiment. I think these attributes would have been interesting to include and could also provide more insights into what’s happening on stage.

This is just for fun: KDDI, Japan’s second largest cellphone carrier, launched a new Twitter related mashup called IS Parade. It’s a fun little visualization of Twitter data that let’s you create a virtual parade to celebrate your username or any other keyword.

Nike Basketball partnered up with the good folks from Stamen to create a new visualization for the NBA Playoffs. Post-season Twitter Playoffs compares the competing teams based on how many times their name is mentioned in the Twittersphere.

Matchup

Matchup displays the current state of affairs as the height of the square representing the team. You can switch between scaling each game independently or in regard to the whole league.

Bracket

Bracket shows the complete playoff tree with the winner / loser for each game. Again, the amount of Tweets per team decides who moves on and who is eliminated.

In addition theres a detail page for each team with the recent Tweets in chronological order and the possibility to cheer for your favourite team. The smart thing for Nike here is that each detail page contains links to their Player profiles, team collection and news articles. this drives traffic back to the official Nike basketball site.

I am once again happy to see such good work coming from Stamen who seems to attract more and more of the big clients lately. From a business point of view, I furthermore enjoy the cross-selling (sorry for that term) ideas implemented in this application.

Let us know your opinion in the comments.

Information Aesthetics, one of my most favourite websites just celebrated their 5. birthday. It’s no secret that Infosthetics has been a big inspiration for me personally and professionally. So, all the best to Andrew Vande Moere and his co-authors!

As nice little birthday present Moritz Stefaner from well-formed-data.net has created an adaption from his Elastic Lists project to revamp five years of excellent content on infosthetics.com. The posts are represented as cells in a grid, ordered by date and color-coded based on their categories. The grid can be filtered by category, author, year or number of comments.

Give it a spin: Five Elastic Years of infosthetics.com

Google’s official description reads:

Google Image Swirl organizes image search results into groups and sub-groups, based on their visual and semantic similarity and presents them in an intuitive exploratory interface.

How it works

Search results are represented as stacks of images whereas the first image is fully shown thus giving a clue about the type of images grouped together. The stacks represent the different visual perspectives for a term (see the Apple query as an example). Once the user selects a stack, the images spread out in a relations diagram grouped by visual similarity. The original results are still visible on the side, making it easy to navigate back to the original query. This can be done repeatedly to drill down into the search result. The thickness of the edges connecting the images and groups represent the size of the connected result—the more images are in a subset the thicker the edge is displayed.

Google Image Swirl is still an early protoype and the available queries are limited, which means you can’t already search for any term. I see a lot of potential in the combination between diversity and similarity of search results as it let’s you gain overview as well as focus on a specific type of result. I recommend having a look at it and would love to hear your opinions about it in the comments.

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.

Cell Size And Scale is a small Flash application that shows object of different sizes. Ranging from a coffeee bean to the carbon atom. The only interaction needed and the only interaction available is scaling. Seems obvious, right? What I really appreciate about it is the fact that the horizontal scroll bar is the only interactive object. No zooming by double-click, no drag & drop, no right-click. Simply move the bar from left to right as you scale through the dimensions.

Simplycity meets illustration meets education – hopefully the result is insight with a touch of joy.

Cell Size and Scale on Utah.edu