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 out there.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Engaging the audience doesn’t have to stop with interactive content – it’s an ongoing process. Check out our Audience Engagement Playbook for strategies to help keep your audience engaged.