The team built an algorithm and a visualization to analyze the sentiment of tweets around the timely and popular topic of the Oscars. The ultimate goal is to see how well the public’s sentiment matches up with the results of awards night. The interactive peice allows users to explore a timeline of tweets about movies and actors which are visualized by volume and sentiment of tweets.

I’m glad the visualization keeps things organized in a grid and doesn’t mind some overlapping circles. Visualizing this same data as a scatter plot would actually make it much harder to read. It also does a good job of showing top level information about a particular actor or movie on any given day. You can quickly see who’s the most talked about and generally whether there was more positive or negative talk.

Arranging things in terms of a more positive or more negative sentiment is nice for generalization but it’s not all that useful without a neutral category for tweets. Most everything ends up averaging out to a middle range, somewhere in between positive and negative but that’s only part of the picture. Without seeing how many tweets are positive, negative or neutral we can’t tell if people are really polarized about a movie or actress of if people tweet a lot but are mostly indifferent.

We also can’t really see how sentiment changes over time with this visualization. Seeing a snapshot of a day is useful for Oscar nominations night and the Goldon Globe awards night but how a particiular actress or movie is performing on a given day isn’t nearly as interesting as how volume and sentiments about a nominee have changed over time.

There’s still some interesting data in the daily view but with almost 60 days to choose from there’s no indication of what day might be more interesting to examine. You could easily denote important days by adding a low profile graph of the volume of tweets that spans the timeline slider. You’d then be able to see which days have a big sample of tweets to visualize.

One other feature I’d love to see would be “associted nodes” – if the user hovered over The Girl With the Dragon Tattoo in the movie section, the associated actors on the left would also be highlighted – useful for those who didn’t see every Oscar nominated film.

The LA Times has been making moves in the interactive direction, seemingly in order to better compete with the likes of The New York Times. While I encourage their efforts I don’t think this product up to par. The USC institutional partnership is valuable but the effort seems frivoulous for a topic as unimportant and attention-seeking as the Oscars. Being able to analyze the sentiment of Oscar tweets isn’t terribly valuable and the tool the LA Times built isn’t all that useful for achieving that.

There’s a lot of potential for sentiment analysis and for harnessing the power of Twitter through visualization. This feels like a very tentative first step towards that but for now it’s a step that just gets the LA Times some more pageviews.

Further reading: @sethgrimes, a consultant who seems to have some expertise in sentiment analysis, has also penned some thoughts and feature requests for the Senti-meter.

The 2011 State of the Union included similar visualizations alongside the President’s speech. Most were pretty straight forward, some suffered from issues common to visualization.

This year the graphics were again heavily leveraged to drive home the oratory points in a visual way. These images were seen by millions of Americans and coming from the White House they deserve some scrutiny. While no display of data is completely unbiased, some do a better job at presenting information in a straightforward way. Let’s see how the President’s data and design team did this year.

The first visualization put up in the enhanced section of the screen seems simple enough but when you read the fine print, the bar graphs represent “percent of households with annual income within 50% of the median“. This is a complex and confusing metric to show and I think the bar graphs oversimplify it. You understand quickly what the graphic is trying to convey: the middle class is shrinking. What you miss is the definition of that ‘median’ and what the full spectrum of annual income looks like.

Next up there was a graphic that looks remarkably like one popularized by MotherJones in reference to the Occupy Wall Street movement. The MotherJones graphic is a bit clearer since it has a line that represents each segment of income earners instead of just the top 1% and middle 60%.

Of course the economic crisis was a major talking point. The wall street graph associated with this portion of the talk is worth mentioning. The message is quite striking but there are some murky elements here. The fact that the red area fades out as it goes back in time makes me curious about what data is being hidden. The other strange thing is the x axis. The time scale is incredibly hard to read here but extremely important to interpreting the visualization.

In reference to job creation, the President showed this image, very similar to the controversial graphic previously created and promoted by the administration. There is now a campaign encouraging voters to send postcards to friends with this visualization on it. It’s hard to really tell what the State of the Union graph is showing. There are few labels and the scale of time on the x axis is non existent. Other critics have questioned whether this is showing the change in unemployment or total unemployment figures.

A chart very similar to this one was scaled incorrectly in the 2011 State of the Union. Last time the circle representing tax cuts for people with incomes over $1million was too small. That problem seems to have been addressed in this iteration of the bubble chart. It’s difficult to tell but they may have even over-corrected a bit.

Many of the other graphics were straightforward bar graphs, simple pie charts with the occasional piece of chart junk thrown in. Out of the 102 ‘slides’ in the enhanced broadcast, about 1/4 (26) of the slides visualized data or used an associated convention.

It’s great to see data visualization taking the spotlight on the national stage. The exposure ensures that visual literacy for data visualization will continue to become more important and mainstream. Each of the graphics were only up on the screen for a few seconds but being on a national stage means they deserve to be examined and critiqued. It’s difficult to eliminate all bais but the tendency should be toward open and honest display of data.

Data visualization is powerful and has been adapted by marketers and politicians for their own gains. It’s up to data visualization practitioners to guide the use of this form of communication in the right direction and to call for more sophisticated and honest products of visualization to be released to the public.

There’s definitely room for the bar to be raised in the use of data visualization in a official capacity. In a perfect world the White House would create interactive visualizations and release them to the public along with documentation about the data sources and process used to create the tool.

Inevitably some of these news sources do it better than others but the ones leading the pack may surprise you. My picks for the best election results trackers are The New York Times, The Chicago Tribune, and Fox News. What’s interesting is that all of these trackers use the exact same data, provided by the AP, but no two present it to their audience in the same way.

Fox News, despite their sordid history with displaying data, has done the best job of communicating the basic information to its audience in a clear and quick way. The design of the page – from visual hierarchy to layout, color and typography – is far better than any of the other trackers mentioned. For displaying the data, the table at the top wastes no time with abstract bar graphs to represent percentage of votes and just gives you the straight numbers. The projected winner is clear and the candidates are arranged in standing order.

Below the table we have a clear indication of the percentage of polling stations that are reporting and a call to action to see all exit poll results. The map is simple but extremely clear. Hovering on different counties re-sorts the color key by the rankings for that area – a nice touch and easy to detect visually. The ability to explore the primary results by town is also a nice added feature and easy to find. Fox News didn’t try to present all the data they have on one screen and instead split it out into separate pages. They did, however, decide to automatically play a video of the winner Mitt Romney when the page loaded but otherwise a job well done by Fox News.

On the other side of the spectrum, The New York Times has attempted to display all of the New Hampshire primary data on the same page.

The most important candidate information is still clear but there is a lot more clutter on the page to wade through. Some of it is useful and contextual and some could easily be eliminated or hidden in a smart way. It’s a lot harder to find the percent reporting on this page as well.

By default the map is presented showing results by town instead of county. Showing results by town may be interesting for the individual user to see result for where they live but the essential information is really the winner in the larger counties. Deciphering the aggregate winner from town areas is very difficult to do. The user can switch to county view with an option on the right and can also filter the map by a number of demographic and political metrics, some more revealing than others.

An alternate map titled ‘size of lead’ can be accessed in another tab and attempts to visualize the magnitude of the win with circle size. To me this view doesn’t reveal any new information you can’t get from hovering over a county area. The town view of lead size is more interesting but it’s very difficult to determine who won in each area since the colored circles are so close in value.

The New York Times nicely presents a selection of exit poll results, highlighting the top candidate for each survey result. They also show a selection of other NH Primary polls with similarly useful highlighting. One small detail on the page that seems like important information is the small asterisk stating “*The Republican Party penalized New Hampshire for holding its primary before February 2012 by taking away half of its delegates.” None of the other trackers mention this.

This map from the Chicago Tribune takes the interface of a primary tracker in a different direction.

The simple page directs your eye to the important information and leaves out all unnecessary clutter and context. It’s obvious how the candidate sidebar relates to the map and the color coding seems simple enough. Clicking on a candidate changes the map to represent the percentage of the vote that candidate has in each area. The color scale changes to a purple range and, as the sidebar text states, “gray indicates a tie.” Clicking on other candidates changes the map’s coloring and takes some cognitive work to keep up with. Some of the colors generated by the purple to gray scale are similar to the color assigned to Romney in the sidebar. The candidate colors in the sidebar no longer reference the active map.

If any of the trackers should have town-level data it should be the one with a map that’s 75% of the page. Instead, this map zooms to arbitrary levels, revealing no new information.

After this tracker, the level of quality falls steeply, ranging from not useful to not usable. However, the sheer number of visualizations put out is encouraging, especially since each news outlet will compete against the other for tracker traffic. Let’s hope these dynamic data displays improve as the political season rolls steadily on and that users pick visualizations for their display of data and not their affiliation.

Andy Kirk has already thrown down some pretty salient points about why this may be the “worst visualization of the year” and he’s not wrong. The bars and graphical plain are in isometric perspective, they’re mainly semi-transparent except for the very top, and they overlap to make a visualization that’s completely unreadable 75% + of the time.

If you want to compare two of the search terms just click on them in succession. Don’t pick ones that are too close to each other though, chances are some part will be obscured by the front-most graph. Try to avoid accidentally hitting the search icon inside the button – that will perform a Google search. In another interaction design nightmare, the only way to deselect the two you are comparing is to click the “back”  button in the upper left of the visualization. Truly “comparing” any two bars is nearly impossible because of the perspective and lack of vertical scale.

But that’s not all. Google has built in a whole series of animated data displays into Zeitgeist that break even more visualization rules. Let’s take a quick tour of them.

The first is a two-item bar chart, still in isometric perspective, that compares searches for a single term in 2010 and 2011. For several of the terms the 2011 bar is an arbitrary 10,000% higher than 2010 because there were no searches for Rebecca Black last year.

Next we have “search volume time lapse” which plots searches by week along a simple horizontal axis. If you can ignore the cylindrical shape you might actually be able to compare these. But on what scale? The Y axis is labelled 0 to 100 and when you select a search term to compare it to, all of the bars change heights, but the scale stays the same.

Next we have another isometric visualization with cylinders, comparing one search term directly to another. Some comparisons are more relevant than others.

Further down there is a curious chart that lets users explore related search terms. This “drawer” visualization stacks bars on top of each, occasionally obscuring ones on the bottom. These bars, about half as useful as their text labels, also have some strange striping that I can not explain.

And last but not least there’s this beauty. Try to figure out what it is showing.

Can you even tell where the baseline of the top row sits? There’s a tiny shadow sticking out to give you a rough idea. Each is labelled with a number from 0 – 100 again completely unexplained. After some digging through the “About Zeitgeist” link at the bottom I found this:

The normalized search numbers reflect how many searches have been done for a particular term, relative to the total number of searches done on Google over time. They don’t represent absolute search volume numbers, because the data is normalized and presented on a scale from 0-100. Each query is divided by the highest point that query reached, or 100. When we don’t have enough data, 0 is shown.Read more about how we scale and normalize search data.

Zeitgeist even has an inspirational video to get you excited about it, much of it presented in the context of Google+ (the second fastest growing search of the year). The report failed to capture the spirit of the data Google has captured and ignored the importance of visualizing it in a straightforward way. Google is a company with the power to reach a tremendous audience and in this instance they’ve done a terrible job of presenting the content in an understandable way to the people of the world. Did you gain any insights from their 2011 Zeitgeist report?

Designed by the interactive team at the Guardian, led by Alastair Dant, this visualization is functionally advanced and richly detailed in the data it presents. The tools uses a custom physics engine for the twitter circles as well as custom renderers depending on the browser. Read more about the behind the scenes in this post on the Guardian data blog.

It took four and a half people about three weeks to build (design/development) w data analysis by academic partners – @ajdant

In essence, the tool graphs tweets per hour across the top in a navigational timeline. In different places along the timeline key events are highlighted and explained in the left sidebar. The team then plotted influential tweets and retweets of related stories in an abstract space below, color coding them by the sentiment of the tweet. With much more subtlety, the ‘originating’ tweet is highlighted in blue to match the vertical bar that appears in the timeline.

Users can explore the events in more detail by hovering over individual bubbles to read the contents of a tweet. Doing so replaces the key along the bottom with the tweet while clicking keeps a tweet visible as you move about the piece.

The general interface of this tool is functional and makes sense but I think it breaks a lot of the conventions set by similar visualizations from the same team like “How Twitter tracked the News of the World scandal.“

The play button seems like an afterthought compared to the Murdoch visualization and the previous and next buttons could be made more prominent. I think the visual hierarchy is what bothers me the most. Once I click on a particular story its title and ‘authenticity’ are left aligned, though still near the top. The text of the original tweet is also quite large compared to the contextual information and labels on the visualization.

The timeline too seems more thought out in the earlier twitter visualization. The London riots timeline has 4 different types of vertical lines on it, all with a fair amount of contrast and the labels for the dates are awkwardly placed. I do like that there is a stepper in this visualization that snaps to different points on the timeline but its tricky at different points to figure out which blue line the information below is referring to. It may be nit-picky but the rendering of the blue lines is inconsistent and blurry at times, effecting readability.

The circles themselves, the crux of the visualization, give you a sense of the volume of tweets as well as a loose grouping but you have to do some digging to determining where reports or events originated. The tweet bubbles are scaled by their influence (twitter followers) and generally get smaller over time which makes sense to me. However it seems the originating tweet follows the same rules and isn’t given any extra importance in terms of scale for being the first of its kind. The blue circle around the originating tweet isn’t explained in the key and it takes some decoding of the tweet’s text to see what it means. It’s also difficult to track changes over time. There’s no quick way to see which tweets are newer and which are older. This could be done with opacity or perhaps their horizontal position in space.

It’s easy to draw parallels to a different visualization of sharing that primarily utilizes circles – Google+ Ripples. Obviously the Guardian can’t rip off the interface or functionality but there are useful concepts to reference. I think Google+ Ripples does a great job of showing influence, volume, and directionality of information over time. That’s no easy feat and I think the Guardian piece does most of this but doesn’t effectively communicate the directional flow of information. Grouping the tweets together partially accomplishes this but you can tell tweets in different groups have very similar structures but you can’t determine which came first without reading.

Admittedly twitter presents a much greater challenge when visualizing the flow of information in comparison a network like Google+. Twitter users can change text, shorten links, retweet in different ways, paraphrase and do any number of things to cloud the path of sharing. Not to mention the order of events matters a bit more. This difficulty is why I have yet to see a visualization of conversations on twitter as effective as Google+ Ripples despite the dozens of them that exist. I think twitter suggests a different visual structure than a Google+ post. The London Riots is an impressive visualization of a small subset of twitter data for a complex issue. I don’t think they hit the nail on the head for visualizing twitter data, nor were they trying to. Despite all that exist I think there’s room for one very very excellent visualization tool for twitter that shows conversations and is useful for analytics.

Who wants to start working on it?

This visualization is in part meant to display data and does so with scale and numerical labels but it’s true purpose is illustrating the complexity of the situation. Any other reading of it and you’re looking for a different visualization. The graphic has a tremendous amount of text associated with it necessary for context and explanation. Everything about it – from the numbering of the paragraphs to the small diagrams across the bottom – is dying to be interactive. Fortunately the NYT did just that.

The interactive version has much of the same content. The text is edited down to what’s important and what the designer can actually expect to be read by a user in order to understand the piece. Ideally the graphic wouldn’t need much accompanying text but in this instance it’s a necessary evil for such a complex subject matter.

The buttons for filtering the graphic on the left make sense instantly. Clicking each brings up a filtered view of the graphic as well as helpful contextual captions at the bottom. These states match up almost 1:1 with the numbered paragraphs on the printed version but have the added benefit of referring directly to a specific part of the larger image.

Hover states on the country circles and arrows reveal most of the actual numerical data but only being able to see one at a time leaves the bigger picture slightly murky. Keeping the larger graphic in view would also come in handy for the filtered states on the left. Instead of completely fading out it might help to have the other nations at a reduced opacity in the background.

Thomas Watkins had quite a few more concerns about the interactive visualization than I do which prompted him to make his own visualization based on the same data. Stephen Few later posted it to his blog.

I find his visualization useful and informative but in a completely different way. If I was looking for an analysis of dollar relationships between economy size and debt / GDP ratio I would turn to his graphic. If I was looking for an overview of the Eurozone crisis with a bit of helpful contextual information I would look for the NYT piece. I don’t think Watkins’ visualization in any way replaces that of the NYT. Even though it uses the same data it has a completely different set of goals and ultimately a different audience.

This Eurozone debt crisis has gone on long enough that more visualizations have been created around the issue. One visualization, published by the BBC, tackles the issue in a similar way to that of the NYT piece.

Like the NYT piece, this ring-like network diagram communicates the complexity of the issue along with some contextual information about each piece of the puzzle. Clicking on a country highlights arrows in the network that represent how much money one country owes to others.

The sidebar on the right of the graphic changes to display more in-depth information about that country including a simple bar graph comparing GDP to foreign debt which looks like it could have come out of Thomas Watkins’ visualization. In many ways this visualization combines elements from both the NYT interactive and Thomas Watkins response. The country names around the ring also update with the amount they are owed from the active country. This activated state is actually a bit visually confusing. There are lots of elements highlighted in orange and not a lot of contrast between the type sizes for active and inactive countries. The sidebar could also be formatted better to allow for an easier skim of information with more whitespace. This visualization does provide a nice piece of perspective about the average foreign debt per person which communicates a broader principle about population size in relation to total debt.

None of the individual pieces give the viewer a complete understanding of the Eurozone crisis but each gives a unique perspective on the topic that adds up the the greater whole. The relationship between the three designs reveals how many ways you can visualize the same type of data. It also suggests that form and intention determine audience. Which one of these visualizations do you think works the best. Which one honors its intentions and which gives the most insight into the issue?

Produced by the Adobe Experience Design team, 100 Years with the San Francisco Symphony is a detailed visualization of the institution’s history all wrapped up in an attractive spiral-shaped timeline. Each colored block represents an important event and has a piece of media associated with it.

This simple exploratory tool adds a lot of visual interest to an otherwise dry history of the San Francisco Symphony. The key on the left also acts as a filter for the spiral visualization. Filtering down to one category reveals an abbreviated timeline of that subject. Although very simple, this feature is powerful because it puts related historical events in the same context and creates a sub-narrative within the larger history that’s easy to follow.

Hovering on blocks reveals a preview in the center of the spiral which when clicked opens up to a modal window with that piece of media. These interactions define how you interact with most of the actual content but to me they feel a little clunky. The media preview in the center of the visualization often looks like it has a title of “Henry Hadley” when really that text is a label on the timeline. The styling of both the preview box and the modal window don’t seem to match the smooth and minimal style of the main screen. Their darker color and hard outline look a bit out of place.

More importantly than that, the modal window covers up most of the main visualization and the key, leaving you only with “back” and “next” buttons for navigation. These strangely titled buttons mean you have to close the window to navigate to an event a few years down the line. The modal window also breaks the convention of color coding events, making it unclear what category the piece of content you’re viewing is in.

Though unsurprising since it was built by Adobe, it’s slightly disappointing that this visualization was built with Flash. It’s completely functional and good-looking but it seems like an ideological choice rather than a practical one. Web languages have a much better chance of lasting another 100 years than Flash does.

How Music Travels is another recently published music visualization which combines history and taxonomy in one complex and compact interactive piece. The data is presented as a flow-chart, on a map, animated over time. Latching on to increased popularity in music tourism, the British travel service Thomson created this graphic to draw in and educate visitors on the evolution of western dance music around the world.

This little graphic, completely built with HTML5 and CSS3, packs a tremendous amount in and, of course, leaves even more detail out. It’s no easy feat attempting to sequence the complex evolution and taxonomy of musical genres, much less plot them on a map. The map used is actually genius in how vague it is. By avoiding any actual geography, points on the map can be as general or specific as the data allows. The simple hierarchy used is a quick read and also encodes information about that regions importance based on its relative scale.

The animation itself plays through a little quickly on the first pass but the big scrubber makes it easy to go back and slowly replay pieces of the history. Especially interesting are the 70s and 80s. In the 70s we see Disco go global, making the jump to Europe and later in the 80s we can see the explosion in diversity caused by the digital music revolution.

For all the complexity and subjectivity involved in talking about music genres I think Thomson did a great job of distilling down the data and presenting it to their audience. Commenters can gripe about missing influences and skipped genres but I applaud the visualizers to minimizing their scope and sticking to their guns. In their post about the graphic they admit:

This is a fairly complex subject and much debate exists not only around how you define various genres of music, but also where they initially came from.

The end-state piece is quite visually complex but that complexity is representative of the subject involved. I don’t know if it makes me want to travel to another country for the music but the simple tools help me extract some interesting information about how the travel of music itself.

Finally we have Definitive Daft Punk which actually visualizes the musical anatomy of a mashup.

Designed and developed by Cameron Adams, or The Man in Blue, this visualization breaks down the individual tracks that make up his mashup and presents them in a combined gantt chart and functional music scrubber along the bottom. The audio waveforms of each track are also visualized in concentric circles and are color coded to the tracks along the bottom. When a new track is added the title appears briefly on its ring. The ring itself disappears when that track is no longer playing.

Amazingly this visualization is built entirely in HTLM5 and CSS3 using canvas and some other pretty complex parts and pieces. The stunning visuals make it a little CPU heavy but embedded in the bright colors is interesting information about how mash-ups are created.

The layering of tracks becomes apparent in the gantt chart and you also get a sense for the pace of the whole song; where it’s more compressed or more relaxed. My one criticism is that tracks used more than once in the mashup are hard to see. Instead of cascading vertically and changing color, tracks that have already been used should appear on the same line in the same color but placed further down the timeline.

Cameron really went the extra mile with this piece to communicate the nuances of creating mashups to a wider audience.  In his post about the visualization he says:

Hopefully it gives you a new insight into the artform of the mashup, otherwise you can just stare at the pretty shapes.

Some will come to these visualizations only for the pretty shapes but as with most visualizations of merit, you get out of it what you put into it. You need to look closely to gain understanding. The trick is for designers to build interactive pieces that can instantly draw in a user, keep them there and communicate a message or impart knowledge. People instantly connect with music and providing an interface that helps them see it in a new way can be powerful. By re-framing familiar concepts in new visual displays and interfaces we can guide people to change their perspective and learn something new.

Communicating core issues and educating the public can add members to a movement and make real progress. Data visualization can be harnessed as a tool for education and recruitment by visually presenting issues to a broader audience. If you want to get up to speed on the movement, the best place to go is a graph. Let’s examine some of the more effective and complex visualizations coming out of the movement.

Business Insider put together a collection of charts spelling out “What the Wall Street Protesters Are So Angry About”. In about 40 charts and images they explain the tug of war between labor and capital.

Most of the graphs are sourced from the Federal Reserve Bank of St. Louis and while they could use some interactivity to prompt further exploration, they communicate the crucial issues clearly and effectively.

Mother Jones has also become a leading news source around the Occupy Wall Street movement and has been churning out a multitude of articles since it began. One post breaks down the makeup of the 1% in simple graphical form while another collects visualizations about income inequality, some more effective than others.

The social media optimization company SocialFlow has been posting about Occupy Wall Street on its blog and has recently included some interesting visualizations about influence on twitter in spreading the movement.

The complex network diagrams, generated at different times, form a narrative about the spread of information about the movement on twitter. It’s fascinating to see the origins of the hash-tag and movement online and its rapid spread through the community. The map from October is extremely complex, showing how the movement shifted to media outlets as the information sources. Since small screenshots don’t do it justice, the SocialFlow blog posted this link to a full size PDF of the most recent rendering.

Recorded Future is tool for aggregating, analyzing and exploring web data and their blog has also featured some in depth analysis of the Occupy Wall Street movement that shows off the tool nicely.

The powerful interactive tool allows you to explore the data they’ve harnessed around the movement in several interesting and useful ways. Most simply they show a timeline which can be filtered and enhanced to pull from more specific subsets of data. They also have a complex influencer tree map that allows you to explore some really interesting data about news and information sources.

Most of the data is focused around events occurring since September 1st but in their blog post about this visualization there are screenshots of earlier influencer maps that show an evolution similar to that of SocialFlow. There are seemingly limitless ways to filter the data presented by the Recorded Future tool. It is much more about exploration and discovery than communicating a concrete idea like some of the other visualizations mentioned. It becomes very valuable when you consider the rapid evolution of the movement. Having a real-time data visualization of momentum and events is important for staying on top of the Occupy Wall Street movement and the Recorded Future tool begins to satisfy this need.

Protesters certainly have bigger concerns than how their data is presented but visualization has the potential to be a key factor in the success of this movement. I hope major media outlets start producing comprehensive visualizations about Occupy Wall Street that continue to reveal insights about the origins, progress and future of the movement.

The visualization, completely built in HTML5, features some smooth animation and fun sound effects, both as the visualization is loading and throughout the interactions within it. The layout and design of the visualization work well with obvious buttons to reveal blocked spam near the timeline and to reveal trending keywords along the lefthand side. Trending keywords are shown as an animated stream-graph, a visualization form made popular by Lastgraph and the NYT but improved drastically here with animation and interactivity.

Being able to click and expand individual streams make this graph a lot more manageable. The way the keywords are displayed is very readable despite quick animation. It’s aslo entertaining in a way when there seems to be a tug of war between keywords. Revealing spam in the stream makes comparison easy and it’s interesting to see when keywords appear in both spam and non-spam streams.

The map area is zoom-able and drag-able as you might expect. Location is less important when thinking about email so the map doesn’t get too fine-grained. Users can zoom in on a continent and drag the screen to snap to another but can’t zoom into the map further than that and rightly so. The timeline along the bottom also zooms at the same time, showing the last 5 minutes of activity in greater detail.

The circle visualizations on the map show email frequency well but it’s almost impossible to get useful information out of their size even with a key. By clicking on any of the circles the visualization zooms to a third level, no longer map related. After a short animation we see a series of circles that represent individual emails undergoing Yahoo’s email verification process. The animation continues to a new sample of emails and runs through the same process.

This view is very much an abstraction of what’s taking place on the map but does reveal some more detail about the process. Each circle shows the verification process of 5 tests when the user hovers over it. Clicking on these circles again does something different than you might expect. Instead of zooming to another level of detail, the circles fall away to reveal a random illustration in a series of infographic slides. These simple visualizations try to give the user a sense of context and scale. For the huge numbers Yahoo works with, doing this is almost impossible. It is fantastic that each of the slides links to the source of that information. More visualizations should do this for the sweeping statistics they include.

The Yahoo Mail visualization encourages users to explore and it educates them about the service along the way. I think there are some issues with  the map zooming metaphor and the information it shows but the visualization is never hard to use. I’d like to see more exploration with the bottom timeline, showing email volume trends over larger periods of time. Having a 30 minute view by default looks a little static compared to the activity on the map. The 5 minute view is much better suited for the initial visualization and does a better job of showing near realtime fluctuations.

The piece is somewhere between an enlightening visualization and a promotional piece for Yahoo Mail but as a whole it’s a good case study in data interaction and display for other near realtime visualizations. The folks at Periscopic, as always, have done a nice job of balancing data display, interaction and the needs of the client to create a well rounded visualization.

The New York Times has been putting out maps related to specific storms but now they’ve released a version with a longer shelf-life appropriately named ‘Hurricane Tracker.’

The interactive map, built by Matthew Bloch, Shan Carter, and Matthew Ericson is a stripped down and simple representation of a lot of data related to active hurricanes. The page is simple and easy on the eyes, inviting you to zoom in on the finer details. Despite it’s simplicity it does a good job of communicating an abundance of crucial information to the user. It quickly answers “Where is the storm going, how fast are the winds, when will it be there?” The key across the bottom immediately explains the coloration on the map and wind speed chart on the right. Intuitive hovers on the map inform what each shaded area means and helps build a timeline for the storm.

The map itself works like you’d expect a Google map to, zooming in for fine, location specific details with scrolling or the slider on the right. The contextual sidebar continues with the minimal feel with a small graph boiled down to it’s most basic graphical elements. The tracker also appears to be prepared to handle simultaneous hurricanes as well which during peak season will certainly be important.

The one advanced feature I’d like to see would be showing the different forecasted paths for the storm in a way that shows the most probable and least probable. This may be information overload but it could be an interesting layer to turn on and off.

The MSNBC hurricane tracker was designed and built by Stamen, the mapping and data visualization firm hailing from San Francisco. This tracker, which features a nice animation of the storm over time when the page loads, is overall a bit more complex than the NYT tracker, both visually and functionally.

Though the data and display have a similar structure to that of the NYT tracker, the execution is more complex here. The key is broken up into previous, current and forecast with 3 wind speed colorations for each. I can understand the inclination to break it up that way, especially for unpredictable storms that may double back on themselves but at first glance a simple storm becomes more complex that it needs to be.

The most crucial point on the map, the current location of the storm, is also the most complex and difficult to decipher. The hovers explain more with contextual information but getting to that point requires a fair amount of clicks. The key also has the functionality to simplify the display by turning on and off different layers of information but this isn’t always better than optimizing the viewing experience at first glance. To me there is too much information being displayed here at the same time.

Interaction with the visualization and map itself is quite pleasant and responsive. The intro animation effectively communicates the speed of the storm over time while wind speed chart on the left communicates this through its interaction with the map. Moving your mouse over the chart shows you the corresponding data point on the map as well as contextual information.

Unfortunately the tracker is placed way down on the page, after a very large header area, blocking the intro animation from view for many visitors when they first arrive. The dark map highlights the color and data points well but the visualization as a whole looks contained and cluttered on the page. Full screen mode is better but this visualization would be better served on its own page taking up the whole width of the browser.

Stamen recently released another visualization for MSNBC which is a historical hurricane browser of sorts, showing over 1400 storms that have been tracked since 1851 on a single map.

Built for a completely different purpose with different data, the visualization is somewhat simplified, showing fewer layers of data and focusing more on browsing and looking at trends. With three different sliders the piece makes it easy to filter and refine your view down to the bare minimum. The ability to search by hurricane name or by location helps users refine even faster.

The paths drawn on the map show wind speed and trajectory and are less concerned with time. They show the change in wind speed over the course of the storm but not when the storm occurred. Hovering reveals this information but it covers up the wind speed information by overlaying a red hue on the path. This state creates some confusion with the wind speed key which lists red as a category 5 hurricane.

While the timeline along the bottom gives good temporal context to the paths displayed on the map it would be interesting to try to communicate in what order the storms occurred. This visualization displays a tremendous amount of data but feels a little flat for a historical hurricane browser. Another interesting add on might be contextual news stories for each storm, written before, during and after the event. Each of these storms have a story and you only get a glimpse of it here.

Whether you’re tracking storms from the past or one bearing down on you now, these maps put the power in the hands of the individual user. They allow us to make decisions for ourselves instead of only relying on national weathermen. Their continued improvement for accurate display and communication of data is important and the little details count. The maps that do this the best will be the ones people seek out the next time the sky starts to darken.