Insight

Interactive Infographics: Surveys, Mapping and More

[vc_row][vc_column width=”1/1″][vc_column_text]Interaction is defined as “when two or more people or things communicate with or react to each other”.

This combined with information design is a winner then, surely?

In this way, an interactive infographic, according to Visual.ly, allows a viewer to “interact with the data”, meaning a more memorable experience and ‘take-out’ potential.

A growing force in the information design world, googling the term “interactive infographic” now yields nearly 5.5 million search results, while Visual.ly plays host to almost 1,000 examples of interactive work, the majority of these created with programmes such as HTML5, CSS3, D3 and Adobe Flash.

So where did it all start? To answer that, we must go back to the foundations of information design and data visualisation. A key figure is Jacques Bertin, whose Semiology of Graphics, originally published in French in 1967, classified the use of visual cues to display data and relationships, The system used seven visual variables: position, form, orientation, colour, texture, value and size, combined with a logical link between data and visual elements[/vc_column_text][vc_row_inner][vc_column_inner width=”1/1″][vc_column_text]Michael Friendly, Professor of Psychology at York University, Ontario, discusses the author, who passed away in 2010, in his Data Visualisation Gallery, saying: “No gallery of data visualisation can be complete without paying tribute to Jacques Bertin.”

Revered statistician, public speaker and professor Hans Rosling created perhaps some of the most memorable interactive visualisations. As with any good infographic or visualisation, the data is key, something that Rosling highlights with passion in his fascinating TED talk Stats that reshape your world view. If you have 20 minutes to spare, there are few better ways to spend it than watching the Swede’s 2006 presentation. As the synopsis says: “You’ve never seen data presented like this. With the drama and urgency of a sportscaster, statistics guru Hans Rosling debunks myths about the so-called “developing world”. In Hans Rosling’s hands, data sings.” His interactive visualisations play a part in his talk that cannot be underestimated.[/vc_column_text][vc_column_text][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_column_text]In addition to this, Rosling co-founded the Gapminder foundation – a non-profit venture promoting sustainable global development. Gapminder developed the Trendalyzer software used to create Rosling’s visualisations; converting international data and statistics into interactive, moving graphics. You can have a look for yourself on the Gapminder site.[/vc_column_text][vc_row_inner][vc_column_inner width=”1/1″][vc_column_text]Other present-day pioneers in interactive visualisations in journalism include The New York Times and The Guardian, whose renowned Data Store and Datablog, edited by Simon Rogers, is perhaps the leading data journalism source in the UK.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/1″][vc_column_text]

Let’s dive into some striking interactive infographics

[/vc_column_text][vc_column_text]Here, we will share a few of our favourite interactive infographic design examples, including surveys and live and historical data mapping. Click on the images to have a go of each interactive infographic yourself…

We’ll kick things off with one of our favourite infographics of any format across the web.[/vc_column_text][vc_column_text]

Slavery footprint

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_column_text]A vital aspect of any information design is UX, something even more pertinent in an interactive design. Interactives tend to be more lengthy / detailed / staged / reactive in their approach, so high attention must be focussed on every aspect of the design in order to maintain the user’s attention, interest, dwell time and return visits, depending on the objectives of the app. A great example of this is the Slavery Footprint, which was created by San Francisco-based creative agency MUH-TAY-ZIK | HOF-FER, nonprofit group Call+Response and digital production company Unit9. The final credits would include a list of around 30 people across the different companies; the project taking more than six months to complete.[/vc_column_text][vc_single_image image=”2747″ img_link_target=”_blank” img_size=”full” img_link=”http://slaveryfootprint.org”][vc_column_text]Call+Response were given a $200,000 grant from the US State Department for the project and approached MTZHF, whose founder and creative director John Matejcyzk would go on to call the project “one of the most challenging things we’ve ever done”.

Created with HTML5, the site was an instant smash, picking up upwards of 50,000 hits in the first hour alone when it went live in September 2011, and a companion app, Made in a Free World, is also available.

Offering a great user experience across the whole story of slavery, this interactive survey gives users the chance to find out how many slaves go into the production of the everyday items they use and whose production they perhaps take for granted. With a call to action at the end of the survey offering users the opportunity to share their own Slavery Footprint, the tool is superb for raising awareness of the situation, and leaves you with a genuine take-out from your own ‘personal review’. Whenever we have ideation on interactive infographics, this is always a benchmark and source of inspiration we tend to revisit.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

The Future of Car Sharing

[/vc_column_text][vc_column_text]Mentioned in a previous blog looking at Parallax infographics, The Future of Car Sharing is an example of a more recent infographic trend. Modern, illustrative design is married with strong and at times surprising stats and data, and with smooth transitions and animations throughout the piece, this is a top example of strong execution of digital across a broad audience. In addition to this, the scrolling landscape reveals more of the story in pop-up and rollover formats, and also includes social outreach channels at the end of the graphic to support its viral capability. With close to 3,000 Facebook likes and more than 1,500 Tweets, this has proved a success.[/vc_column_text][vc_single_image image=”2752″ img_link_target=”_self” img_size=”full” img_link=”http://futureofcarsharing.com”][vc_row_inner][vc_column_inner width=”1/1″][vc_column_text]

Bomb Sight: Mapping the Blitz

[/vc_column_text][vc_column_text]Featured on a number of high profile news sites in the UK when released in December 2012, Bomb Sight is an interactive map detailing the location of every single one of the 50,000 bombs dropped on London during The Blitz in the Second World War between 7th October 1940 and 6th June 1941. Offering Londoners the chance to put in their address and explore the devastation around their local area, a quick zoom out to show the whole of the capital reveals the true devastation that was caused, with seemingly not a single area left unaffected by the attacks. A startling interactive data visualisation.[/vc_column_text][vc_single_image image=”2754″ img_link_target=”_blank” img_link=”http://bombsight.org/#15/51.5050/-0.0900″ img_size=”full”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/1″][vc_column_text]

FlightRadar 24

[/vc_column_text][vc_column_text]

One word of warning – keep an eye on the clock, because if you’re not careful you’ll find yourself spending hours as a wannabe air traffic controller! (Or perhaps that’s just my guilty pleasure!)[/vc_column_text][vc_single_image image=”2756″ img_link_target=”_self” img_size=”full”][vc_column_text]

World Names

[/vc_column_text][vc_column_text]With World Names, the user inputs their surname and is shows where around the world that name is most prevalent. With analysis of large databases of name records across the world, the heat map offers interesting results, with other options including an ‘Ethnicity Search’, where the user can map out a given ethnicity along with more statistics. This example has a strong concept, though the execution could be improved with more varied results and additional information. An updated map (more in the Google Maps vein) would also help to update the app.[/vc_column_text][vc_column_text]

BBC’s The World at Seven Billion

[/vc_column_text][vc_column_text]In the BBC’s The world at seven billion, inputting your date of birth offers the output of finding what number person you were on Earth, showing you where you come in-between the seven billion other people. A chart also highlights the dramatic rise in the world population during the 1900s. Giving more information such as your country of birth and gender offers more data, such as average life expectancies in your country and in other nations around the world. This interactive infographic uses clear and simple, iconic imagery and offers all-inclusive, easily understandable results.[/vc_column_text][vc_single_image image=”2760″ img_link_target=”_blank” img_size=”full” img_link=”http://www.bbc.co.uk/news/world-15391515″][vc_column_text]

What to Eat Now

[/vc_column_text][vc_column_text]Eat Seasonably’s What to Eat Now Calendar is another strong example of an interactive graphic kept simple and effective. Part of the Eat Seasonably campaign, the graphic shows which fruits and vegetables are in season at different times throughout the year, and is also available to download as a printable poster. Designed in Flash, the graphic is clear, concise and easy to understand, using photo-imagery and simple, rollover functions. Need to know when you should be eating your strawberries? Eat Seasonably will let you know.[/vc_column_text][vc_single_image image=”2761″ img_link_target=”_blank” img_size=”full” img_link=”http://eatseasonably.co.uk/what-to-eat-now/calendar/”][vc_column_text]

The Most Beautiful Country in the World

[/vc_column_text][vc_column_text]The Most Beautiful Country in the World is another example of an interactive infographic offering clear results and also giving the user the feeling of being part of something. Designed using HTML5  for holiday company First Choice, this project, known as Conflict of Pinterest, lets users vote for a country as ‘the most beautiful in the world’ via Pinterest and Twitter, and was a smash upon release, picking up more than 55,000 social shares and published on Mashable, The Huffington Post and the Daily Mail, while traffic to First Choice’s blog increased by 500%. Where would get your vote?[/vc_column_text][vc_single_image image=”2762″ img_link_target=”_blank” img_size=”full ” img_link=”http://www.firstchoice.co.uk/blog/conflict-of-pinterest-infographic/”][vc_column_text]

Your Daily Dose of Water

[/vc_column_text][vc_column_text]Your Daily Dose of Water, a collaboration between GOOD.is and Levi’s, is another example of modern interactive infographic work, matching aesthetically pleasing photos and iconography with multiple layers of data. Plenty of information there may be, however the data and message still comes across clearly and succinctly – something which is not always easy to achieve.[/vc_column_text][vc_single_image image=”2764″ img_link_target=”_blank” img_size=”full” img_link=”http://awesome.good.is.s3.amazonaws.com/transparency/web/1204/your-daily-dose-of-water/flash.html”][vc_column_text]

Evolution of the Web

[/vc_column_text][vc_column_text]To finish – an incredibly detailed and visually engaging interactive infographic, detailing the Evolution of the Web. The graphic is comprised of two sections: one looking at the evolution of different Browsers and Technologies, and the other looking at The Growth of the Internet (which also uses some nicely contextualised stats alongside the big data). This is a good graphic to sign off with, as it offers clear statistics and data alongside beautiful, memorable design and visualisation, and simple but effective interactive elements. A superb job all round![/vc_column_text][vc_single_image image=”2765″ img_link_target=”_blank” img_size=”full” img_link=”http://www.evolutionoftheweb.com”][vc_column_text]

Not only is there more data than ever before, it is now more accessible than it ever has been. Programs like Tableau offer everybody manageable and understandable data analysis, with open data offering more and more information every day.[/vc_column_text][vc_column_text]What inspiring interactive infographics and interactive data visualisations have you seen? Tweet them to us or send them over via Facebook – we’d love to see some of your favourites.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]