The Top 20 Interactive Visualizations of 2013

by Drew Skau 7 months ago Filed Under: Design

Interactive websites are a great way to communicate visually. With modern browsers like Chrome, Firefox, and Safari, they now provide a nearly limitless multimedia canvas for designers, developers, journalists and animators to build interactive experiences. News organizations, non-profits, companies, and even ambitious individuals are producing incredible digital multimedia experiences as ways to get their message seen. Here are 20 of the best interactive projects we discovered on Visual.ly this year, in five categories: maps, visual reports, data explorers, timelines and scrollers.

Maps

Maps are a great way to showcase data that has any sort of location associated with it. The best maps help show spatial patterns or trends. Many maps are connected to timelines, so they can show spatial data over time.

1. Wikipedia Worldview by Simon Schulz

Point maps are a great way to display tons of information. They can have extremely high information density, so they were the perfect tool of choice for mapping Wikipedia.

 

2. Luminous Cities by TraceMedia

Flickr also has a great portfolio of precisely geolocated data, and a map makes a wonderful way to browse photos. The color scheme in this interactive lends to the theme of city lights, or maybe camera flashes going off.

 

3. The Racial Dot Map by Dustin Cable

This point map uses different colors to indicate what ethnic category people fit into, generating spatial patterns where one area is predominantly one category or another. Intentionally or not, this reveals racially segregated neighborhoods across the United States.

The Racial Dot Map

 

4. 2013 Global Slavery Index by The Walk Free Foundation

Choropleth maps aggregate data for an entire region and display it as a color for that region. They are a great way to show outcomes affected by blanket policies or generalized data up to the level of the region.

The Global Slavery Index 2013

 

5. Washington: A World Apart by The Washington Post

This map has such small regions (zipcodes), that it appears to be made up of points. Zooming in on the map reveals the regions and shows how dense population centers have better educated and higher income groups. The map is followed by a long article with anecdotal evidence lending a human-interest angle to the data.

Washington: A World Apart

 

Visual Reports

Visual reports are all business. They clearly communicate complex concepts and identify all the issues involved in a topic. The visuals augment and support everything the report is communicating, and let the user decide the level of detail they want to get out of the report.

6. Sea of Steel by The Washington Post

This report addresses the issue of gun control in Washington DC. It starts with a video of a map, taking the viewer through the history of the data and the gun control issue in DC. The video ends with an interactive map allowing viewers to delve down into individual neighborhoods that have been pre-selected to show the detailed story. Below the map is a breakdown of all the guns the police seized, showing an overview of the issue from a different angle.

Sea of Steel

 

7. Who’s in the American Center by Anna Flagg

This report looks at the political demographics of America by identifying eight segments and then breaking down their positions on several issues. The report also shows socio-economic demographics for each political segment. The interface takes on a click-through model, with each page showing a different topic. The end of the report shows a summary view for each of the topics with small glyphs indicating the position of the groups.

Who

 

8. What The Jobs Report Really Means by Matthew Klein

Sometimes the best way to tell a story is with a series of charts, and the rest of the information just provides context. This report uses that exact approach, with a series of charts annotated with supportive text. Each chart tells a part of the story, leading up to the main point of the report.

What The Jobs Report Really Means

 

9. The Burning Monk by The Associated Press

The most traditional approach to a visual report is a simple webpage with embedded multimedia to advance the story. The Burning Monk takes that approach, showing lots of emotion-inducing images leading up to a visualization of what it took to get the film from Saigon to the United States.

Data Explorers

Sometimes there isn’t just one story to tell, there are many. Data explorers let the viewer play on their own and find as many stories as they care to or have the time to discover. These are great for showing off an incredible dataset or letting viewers come to their own conclusions about an issue.

10. The Startup Universe by Visually, Accurat, and Ben Willers

Visually created this piece as a way to satisfy our curiosities about the inner workings of the startup world. We were interested in delving deeper into Crunchbase data, but weren’t satisfied with the interface that Crunchbase provides. We wanted it to be different from a typical network visualization, so this piece went through a long design process to arrive at the final product. The piece is built for stumbling from startup to VC to startup, examining connections and finding new stories each time.

The Startup Universe

 

11. NBA Draft: Top Pick vs. Top Performers by Adam Pearce

Some data explorers lay all the data out in front of you and just give you tools to filter them. This explorer takes that approach. A simple filter lets viewers control how many players per year get colored. Mouseover of each data point shows you more information, including a photo of the player. This approach creates a simple and intuitive interface for exploring data.

NBA Draft | Top Picks v. Top Performers
by 1wheel.

 

12. Sport England by infogr8

Another approach is to let the user choose upfront which data they would like to review. Sport England asks viewers to select their five favorite sports to view data on before taking them through a timeline of the participation in each sport, along with the weather. This method allows personalization first, with exploration later.

Sport participation by the numbers
by infogr8.

 

13. The Dangers of Drug Driving by Evans Halshaw

Another approach for explorers is to offer diagrams with data points referring to locations within the diagram. This interactive uses realistic visuals to simulate the visual experience of driving on drugs, with data point callouts providing more details. The brain view shows the impacts of drugs on your own physiology.

The Dangers of Drug Driving

 

Timelines

Lots of data has time connected to it, but sometimes the time is so important that it should be the main way to navigate through the data. Timelines are a great way to showcase a progression or a series of events that had an impact.

14. Self-Immolations in Tibet (March 2013) by Halftone

Some timelines use a “play” feature that automatically advances a marker along the timeline, and often progresses corresponding data visualizations so that they show data for the current time. Self Immolations in Tibet takes this approach. The play feature auto pauses at significant events to show more details about those events. This allows the interactive to call out things that the creators feel are significant or that they want the viewers to focus on as a part of the story.

Self-Immolations in Tibet

 

15. Macrometeorites by Roxana Torre

Especially with timelines, there can be instances where data just didn’t exist. Macrometeorites is a great example of this because it shows how the number of recorded meteorites increases dramatically from 1400 to present day. This isn’t because there were less meteorites centuries ago, but because there were fewer people to see them, and fewer ways to record their occurrences. This timeline works well with a map and bar charts to show the increase. Bar and line charts are natural fits for timelines because they can easily show time series data along one axis.

 

16. 50 Years of Change: LGBT Civil Rights by Rashauna Mead

Combining choropleth maps with timelines can also be an effective way to show data. This map shows the legislation that states have passed over the years, either in favor of, or opposing LGBT rights. This is also sort of two timelines in one, with the second half of the page showing a summary heatmapped table of the state laws.

50 Years of Change: LGBT Civil Rights

 

17. A Month of Citi Bike by The New Yorker

This timeline shows how patterns can emerge and develop over time. When the Citi Bike program was introduced in NYC, the service wasn’t incorporated into people’s schedule. As the service gets pulled into people’s routine, general patterns begin to form, making it look almost as if the city is breathing. Holidays and special events can be seen because they disrupt the normal pattern and flow of bikes.

A Month of Citi Bike

 

Scrollers

Scrollers are all about storytelling. They take the user through a linear storyline with engaging eyecandy and-scroll triggered animations. Killer graphics are key, as they grab a viewer’s attention and encourage scrolling for more.

18. Behind The Bloodshed by USA Today

This is a great example of a scroller used for a serious topic. It takes you through a linear train of thought showing who dies in mass killings, what weapons are used, and what happens to the killers. The scroller ends with an exploratory map of the killings, letting the user find patterns for themselves.

Behind the Bloodshed

 

19. NSA Files: Decoded by The Guardian

This scroller is a kind of combination between a visual report and scroller. It contains embedded videos, diagrams, exploratory visualizations, and even embedded documents. This multimedia approach still takes advantage of scrolling as the trigger for many things to occur, keeping the user interface simple and the experience enjoyable.

NSA Files: Decoded

 

20. Make Your Money Matter by PSCU

Some scrollers are all about adding eye-catching illustration and clever animation to help tell a story. Make Your Money Matter nails this approach as it uses illustrations and animation to communicate the feelings associated with the statistics in the piece.

Make Your Money Matter

 
Drew Skau is Visualization Architect at Visual.ly and a PhD Computer Science Visualization student at UNCC with an undergraduate degree in Architecture. You can follow him on Twitter @SeeingStructure