Interactive infographics. The best examples of using interactive infographics on landing pages
Here's a beginner's guide to data visualization for anyone who wants to learn how to create interactive infographics and maps.
Infographics and interactive maps have become part of many projects implemented by activists, journalists and social movements. But what about organizations that do not have a full-time designer? Even in this case, you can create high-quality visual materials - The Guardian told me how to do it.
Data
The first thing you need to do is understand what data you want to visualize.
Let's imagine that you are running a campaign calling for improved sanitation around the world. To show how important this is, it must be emphasized how many countries still have limited access to clean toilets and how little this situation has changed over the past 10 years. In this tutorial we will use a dataset from the World Bank.
We now have 10 years of data, but we only need the 2000 and 2012 numbers. Therefore, after we have loaded our data, we delete unnecessary rows and columns (advice: save original file with data).
Now that you've cleaned the data, you're ready to visualize it. In our case, another column was added before visualization - the percentage difference between 2000 and 2012.
How to create an interactive chart
Showing data on a graph is the fastest and easiest way to visualize information. Sites like Datawrapper, Infogr.am and PiktoChart are lightweight and easy-to-use tools that allow you to create various graphs and charts and embed them into any website.
Datawrapper is perhaps the most intuitive, and it's also free. Weak side The problem with this tool is that it doesn't display large data sets very well, so we'll only visualize the 10 countries that have seen the most change in the last 10 years.
How to create a graph using Datawrapper:
- Register on the Datawrapper website and create a new chart.
- Copy and paste your information into the provided field.
- Check your details.
- Now the fun part - choose a chart template. For this visualization, a simple one was chosen interactive chart, but you can choose from large quantity options presented on the website.
- The last step is the final editing of your schedule. You can change the colors, add a title, description, etc.
How to create an interactive map
To show data related to different countries, it is best to use a map. We present to you an overview of three free tools for beginners.
Datawrapper
This tool now has a choropleth map option - creating a gradient based on your data. Datawrapper creates maps in the same way as graphs.
Behind: one of the fastest and simple tools. Datawrapper will tell you when you have entered the country name incorrectly. Another good thing about this tool is that if you hover over specific color in the legend, only countries with this color will be highlighted on the map.
Against: There are no templates for individual countries or cities.
Behind: free and easy to use (especially for creating points on the map).
Against: additional features, for example, change color scheme, may seem complicated for beginners (but if you know how to connect KML files with existing data, you can create such a map). It's difficult to add a legend to a map.
It may seem intimidating at first, but with this tool you can create a wide variety of maps and customize them depending on what you want to see on the map.
Behind: will allow you to make many adjustments and add additional layers. Works on mobile devices.
Against: if you plan to create more than 5 maps and expect to get more than 10,000 views per month, you will need to pay to use this tool.
How to Create Traditional Infographics
Traditional infographics are a static, color image on which information is displayed with numbers and icons. The tools that were already mentioned earlier - Infogr.am and PiktoChart - will help you create such an image. They are easy to use - you can just drag and drop necessary information and insert your data to create graphs. Number of templates available in free versions tools, limited.
An example of a quick visualization of our data set using Infogr.am:
With the tools presented in this guide, anyone, regardless of skill level, can create a beautiful, interactive infographic or map and communicate their message to a wide audience.
You've probably noticed a massive shift to online world from text-based content to visual content.
There is no denying the power of visuals on the Internet and in our Everyday life. YouTube and Instagram are dominated by visual content; YouTube is the 3rd most visited site on the web, and Instagram has over 80 million photos posted every day.
Blog posts and articles are 80% more likely to be consumed if they have color images, headlines or thumbnails, and people will spend no more than 15 seconds on a site if it doesn't grab their attention right away.
Infographics are a favorite among audiences and retailers, and are 800% more interesting to people today than in 2012.
On top of that, content is being created at an alarming rate - 60% of marketers create at least a small part new content every day! You can learn more from the review article.
As more and more people start creating content, one thing is becoming clear: in order to be seen, you need to stand out.
Naturally, content marketers are already thinking about the future of visual content, considering what they can do now, what they can implement, and what new technologies are on the horizon. This type of forward thinking is what can make or break your content marketing efforts; you must adapt or you will drown.
With visual content like infographics, marketers have unique opportunity see the future as it approaches. Companies, graphic designers, and marketers are all starting to use infographics - updating them to make them even more attractive to their audience. Even if you already “just post” infographics regularly, it's never too early to learn about trends that are just starting to develop, just as it's never too early to learn how to implement them into your content marketing strategies.
If you want to look into the future, and maybe even learn a few tricks before everyone else, now is the time!
Here are the three types of infographics that will be most common in the (near) future.
If you're looking for a cool infographic creation tool, I recommend checking out Visme. To begin with they offer free account and excellent convenient features for those who are not involved in design. You can get a free account now.
1. Interactive infographics
While we've seen the beauty of interactive websites and easy-to-use games, interactive infographics are still fairly new in their field. Like infographics, they obviously contain some information, and they are usually dynamic. But using interactive elements gives users the opportunity to connect with information and create their own.
No matter your business, product, service or message, you can create an interactive infographic that allows people to rate themselves (for example, “calculate your BMI here”). Users can also click on related information, which will take them to a more in-depth resource, or back to landing page, thereby creating traffic. It's a very adaptable and fun way to engage your audience.
Many marketers have already adapted to this type of infographic, and it transfers quickly. But at the same time, many still take as a basis simple infographics:
….just imagine what else you can do with interactive infographics.
You can try:
- Using scrolling techniques that make images or shapes stand out from the background
- Constructing “pop-up windows” that expand text areas
- Images or statistics pop up when you click on them
- Turn your infographics into multiple pages that users can view
For more detailed example For an interactive infographic, check out this one:
To make an infographic highly interactive (with scrolling, pop-ups, etc.) you'll need to learn a little about HTML5 or CSS, or hire someone else to figure it out for you.
Despite the extra effort, you will be rewarded with a unique, engaging, and effective piece of content.
Why should you try to implement infographics in the near future?
- This encourages your audience to engage with and share your content.
- This generates traffic (via links)
- This proves to your audience that you are innovative, resourceful, and intend to provide timely and interesting content.
- There are layers of interactive infographics that make its development manageable
2. Embedded video and GIF
This is a different type of infographic that we are seeing more and more often today. Infographics offering short videos or even GIF (Graphics Interchange Format) – great way grab attention and make your infographic stand out from the crowd. While this is limited by platforms, you can share your infographics in the present tense.
Many simple infographic tools, such as Easel.ly, offer an “Embedded YouTube Video” option, or you can add video to an infographic you create in Photoshop using a video layer. You can even add a video to a Powerpoint slide, which you can also turn into an infographic.
Moreover, you can find millions of GIFs online and insert them in the same way. The catch here is that you will have to distribute your infographic as a URL to ensure that it is properly embedded into your site. You may not distribute or save such infographics in .jpeg or PDF format. No doubt, as this becomes more popular, there will be other video and GIF insertion tools to make the process even easier.
But if you want to use this type of infographic before everyone around you, even their dogs, learns how to do it, start now with the tools you find online.
If you want to go to next level, you can make a video from an infographic you already have. This is a great opportunity to be seen on YouTube, Instagram, and even on video platforms such as Vimeo, Snapchat, and others. The video below is a great example of how to turn an infographic into a video.
Why embed a video or GIF into an infographic?
- This gives you an element of surprise - people don't expect the picture to move!
- It's very fun and original, which increases the chance that people will interact and share your infographic.
- This good way show everyone the uniqueness of your brand
3. Animated infographics
The animated infographic has great amount visual models and requires a lot of attention. When a user views a page, they usually don't expect anything to move, so it's a good idea if you learn all these techniques before everyone else does.
Due to the fact that many animated infographics are quite complex and may require some graphic design, coding, and/or domain knowledge software, they are very highly valued.
Here's an example of what I'm talking about:
If you want to learn more about how to create animated infographics, check out this infographic from Tabletop Whale. You can also find various services, helping to create infographics of this kind. In any case, this is one of the most complex processes in the evolution of infographics.
Why should you invest your time, energy and/or money into creating animated infographics?
- This will actually make you stand out from the crowd because not everyone has access to this kind of software or content
- In just a couple of years this will be commonplace - you'll be one of the first to do it!
- Animation will make the information inside the infographic more memorable
- This will inspire your users to work with you.
This is not science fiction.
This may sound too technical and beyond your capabilities right now, but it's likely that these types of infographics will become very commonplace in 2-3 years. We can already see a strong breakthrough in animated infographics and GIFs, especially as GIFs continue to grow in popularity. Infographics are becoming one of the most consumed and most frequently created types of content on the Internet. Why? Yes, because the brain only needs 250 milliseconds to accept and process the meaning of a symbol.
If the average person spends about 15 seconds on a site and then starts to get bored, then you naturally want to pull up anything on the screen that might hold them back - or at least get a message in 15 seconds or less. Some studies have even proven that people can concentrate on something for no more than 8 seconds, and this figure is decreasing every year.
This is the reason and perhaps by-product our constant need to receive information. We live in the information age and all information is available to us. But this also means that the more people try to share messages and reply to everything possible questions, the more content produced becomes background noise.
If the availability of infographics today is any indication, they will soon be everywhere. This means new changes in your work. No marketing campaign in history has achieved success by doing the same thing over and over again.
The idea here is to see the infographic as more than just a jpeg image. Infographics can be adapted to different mediums and used on a huge variety of platforms. Entrepreneurs and marketers have already seen the potential in this. And you?
The future of data visualization is interactive.
But how do you create truly amazing interactive infographics?
Infographics are everywhere, and Lately it is increasingly becoming interactive.
In today's article we will share with you the secrets of creating interactive infographics, as well as links to useful resources.
1. Understand psychology
Before you make an infographic interactive, it's important to understand why you want to make it interactive.
As detailed in this infographic, people are better able to perceive visual information. We are much more likely to read, understand and remember a presentation if it contains engaging visual aids. is an effective learning tool, but it can get even better.
Kinetic training – great alternative, since people learn information better through physical actions.
That's why adding interactivity to the promising field of visualization will help you create even more memorable and effective infographics.
This combination of visual and kinetic approach makes animated infographics the content of the future. Of course, for some themes it is better not to use interactive elements, but in most cases they will only improve the content.
Movement adds meaning to information, allows the user to control the experience, and engages the imagination in a way that static infographics cannot.
2. Add scrolling effects
Chip virtual reality is that to others you will look like an idiot
Google's Cardboard Design Lab is a good "tutorial" for beginning virtual reality designers
Infographics - like an adventure game
The problem with Unity is that it's not that easy to do. good thing under web
Virtual reality is like headphones for your eyes
Virtual reality requires a safe environment; you cannot go into it “on the go.” This limits what VR can do
Closed the session in the first half of the day Archie Tse from The New York Times with the provocative topic “Why the NYT is doing less interactive work.”
NYT's work is based on three rules of visual storytelling:
- If the reader needs to click instead of scroll, then something out of the ordinary must happen.
- Assume that tooltips and any other hover effects will never be seen by anyone. If the content is important, make sure the reader sees it right away.
- If you want to make something interactive, remember that it will be expensive to make it work on all platforms.
You will have to redraw your graphics 2 or 3 times to make it work on both desktop and mobile
How these rules changed the NYT's approach:
- Most visualizations are now static
- There are more texts
- If movement in the picture is needed, it appears during scrolling
(The fourth point states that they still do interactive work. But now the reason must be VERY meaningful).
We did “multi-steps”. Users stopped at step 3. Readers just want to scroll, not click
Archie Tse: Scrolling Vs. clicking
For the past 18 weeks, every Sunday evening Andy Kriebel has been posting the infographic and the data it's based on on VizWiz. The task is to set aside about an hour of time on Monday, quickly analyze the visualization and make your own version.
Below we publish the results of last week - Slavery in the 21st century.
#MakeoverMonday by Andy Kriebel. Detailed description and interactive - on Andy's blog:
#MakeoverMonday by Andy Cotgreave. Detailed description and interactive - on Andy's blog:
I also learned that 51% of people in the world are younger than me, and 63% in Russia are older, and that my chances of dying right now are not that great. The numbers suddenly stopped being “statistics” and struck a chord with me.
Data visualization - uses large sets data with less self made over design; based on algorithms. For example, interactive work New York Times.
Visual art - unidirectional coding. Beautiful but difficult to decipher visualizations, such as the computational art of Kunal Anand.
What is the problem?
As a result, many works attract only sophisticated users, but do not allow uninitiated readers to understand the essence of the issue, thereby defeating the purpose of visualization - to inform the public. This is why it is so important to recognize and understand the problem of visual literacy in the context of visualization.
A new “visual grammar” of journalism
Here are three works that experiment with ways of presenting interactive journalism. They look impressive, but their interpretation can be a difficult task for many.
Gay rights in the US, state by state
The number of data sources and tools for processing them available today clearly shows that never before have so many people tried to get used to the world of data visualization. And when there is such a number of materials available for study, there is only one question "Where to begin?" can be intimidating for every newbie. So, which libraries are the best and what do the professionals recommend? This will be discussed in this article.
Talking about data visualization and not mentioning it is the same as talking about the history of creation personal computers and not say a word about Steve Jobs. D3 (from the English Data Driven Documents) is, without exaggeration, the most important and dominant one on the market JavaScript library open source, which is commonly used to create SVG graphics. SVG (from the English Scalable Vector Graphics) is, in turn, a format vector image, supported by web browsers but previously little used.
The D3 library owes much of its popularity to the sudden interest in SVG on the part of web designers, which to a large extent explained by how advantageous vector graphics look on screens with high resolution(particularly on Retina displays used in Apple devices), which are becoming increasingly common.
“Let’s be honest, if the problem is SVG-based data visualization, then all the other libraries are not even close to solving it,” says Moritz Stefaner, an independent data visualization expert and company owner Truth & Beauty. "There are also quite a few interesting projects, created on the basis of D3, such as NVD3, which provides standard graphics components - ready to use, but customizable; or let's say Crossfilter is simply an outstanding data filtering tool.”
Scott Murray, programmer designer and book author Interactive Data Visualization for the Web, agrees with the previous opinion: “D3 is extremely powerful because it takes advantage of everything browsers have to offer. Although it also has back side: If the browser does not support something, for example, 3D images based on WebGL (from the English Web Graphics Library), then D3 will not support it."
And although this library is truly universal, it is still not ideal solution for any task. “The main drawback of the D3 library, so to speak, is that it does not prescribe or even suggest any particular approach to visualization,” adds Scott Murray. “So it's really a tool for loading data into the browser and then generating DOM components based on that data.”
While D3 is a great tool for custom images, if you want to create a standard graph without much work on the visual aspect, then you might find a tool like Vega. As a framework developed on top of D3, Vega provides an alternative for displaying graphics components. Using Vega, you can visualize data in JSON format European Journalism Center and Data Driven Journalism project. Exact dates The course is not yet known, but you can register now.
In five days, course participants will be able to learn what data journalism is, how it works, and what key skills they should master to become a specialist in this field. Figure out where to look for data to support your stories and how to find new ideas in existing data. Learn the art of turning boring data into a compelling story, infographic, or even interactive visualization. Get acquainted with the basic principles of graphic design that a journalist needs to know.
The course instructors are five of the world's leading experts in data journalism and visualization.
IN this lesson we will learn how to build interactive infographics with using SVG, CSS and JavaScript. One of the less discussed topics is the tendency of new browsers to increase support for SVG files. Unlike raster images, for example PNG, JPG or GIF, Vector graphics in SVG files is absolutely scalable to any size and will display at any resolution or screen density without loss of quality. In many cases, SVG files are much smaller in size and load faster. But the interesting thing that some developers don't realize is that SVG is based on the XML specification and can be applied in a similar way to HTML.
This also means that we can access and manipulate graphics and elements in the SVG file using CSS technologies and JavaScript, which web developers are already familiar with. Developers can now create some pretty impressive animations and effects using SVG. Today we are exploring SVG capabilities using the example of creating interactive vector infographics for the web. View demo or download source you can by clicking on the links below the picture below. Let's get started.
Preparing the SVG file
There are many ways to create SVG graphics. While it's possible to make SVGs by hand coding, we'll want to do more complex graphics Have some type of vector software that can export in SVG format. Popular choice among most designers there may be someone familiar to us Adobe Illustrator , but there are others public applications, For example, Inkscape, which may be more suitable for our purposes.
Regardless of the software you choose, the ability to group objects together and to be able to name those groups (by writing id attributes) remains essential. This allows us to organize our SVG into a proper hierarchy, which we can later access using CSS and/or JavaScript. Illustrator and Inkscape have the ability to do this by selecting multiple graphic elements, going to Object > Group (or Ungroup - ungroup) from the main menu.
Any object or group can then be assigned a name, which becomes the id attribute of the group or object when exported, so avoid spaces, special characters and duplicates.
In Illustrator this can be done in the Layers panel ( layers). Simply find the object you want to name in the panel, double-click on the layer field and enter the desired id. In Inkscape use Object > Object Properties panel for assigning an id to an object or group. This can also be done with Edit > XML Editor panel where you can register not only id, but also classes.
In our example, when we save SVG file and open it in text editor, it will have the following structure:
The markup above shows us the structure we're going for.
As we can see in our SVG markup, each tag
Loading SVG to HTML using JAVASCRIPT
HTML
There are ways to include or place SVG in HTML. This is possible through the use of a tag , tag
First, let's create a div in the HTML document:
JavaScript
Now using jQuery loading, load the SVG file into the #stage block and assign it the svgLoaded class, which we will use to trigger the animation:
$(function () ( $("#stage" ) .load ("interactive.svg" ,function (response) ( $(this ) .addClass ("svgLoaded" ) ; if //Make absolutely sure you are running this on a web server or localhost! } } ) ; } ) ;
Important: load SVG from using JavaScript in order to access its DOM. Chrome (and possibly other browsers) won't let you do this locally; this will only work when running with HTTP protocol for security reasons.
CSS
Please note that the CSS in this tutorial will not contain any browser specifications, but the files will.
First of all, we specify some styles for div block. When loading an SVG, the file must fit within the block size, so it is important to set the block size to match the SVG canvas size.
#stage ( width : 1024px ; height : 1386px ; )
Styling SVG Elements: Setting "transform-origins"
The key to bringing elements within the canvas to life is in the transform-origin property. By default, all transformations to any element in an SVG come from the (0px, 0px) SVG canvas. For any element that we wish to transform (eg scale, rotate), we need to set a suitable transform-origin relative to the left and top side of the SVG canvas. The source will be different for each element depending on the desired effect/animation, but in most cases will be equal to the center point where the element is already placed. This can be quite tedious, but it's easier to simply copy the coordinate information that is provided in our vector editor.
#coffee ( transform-origin: 517px 484px ; ) #coffee-badge ( transform-origin: 445px 488px ; ) #coffee-title ( transform-origin: 310px 396px ; ) #coffee-details ( transform-origin: 311px 489px ; ) #design ( transform-origin: 514px 603px ; ) #design-badge ( transform-origin: 580px 606px ; ) #design-title ( transform-origin: 712px 513px ; ) #design-details ( transform-origin: 710px 620px ; ) #build ( transform-origin: 511px 769px ; ) #build-badge ( transform-origin: 445px 775px ; ) #build-title ( transform-origin: 312px 680px ; ) #build-details ( transform-origin: 310px 790px ; ) #complain ( transform-origin: 512px 1002px ; ) #complain-badge ( transform-origin: 586px 1000px ; ) #complain-title ( transform-origin: 718px 921px ; ) #complain-details ( transform-origin: 717px 1021px ; ) #beer ( transform-origin: 513px 1199px ; ) #beer-badge ( transform-origin: 444px 1193px ; ) #beer-title ( transform-origin: 313px 1097px ; ) ) #beer-details ( transform-origin: 316px 1202px ; )
Applying some initial transformations
We need to set initial styles to change the position of some objects. And also need to hide certain objects, which we don't want to show until we hover over them.
In order to do this we will use CSS selectors. We mainly select objects with id “suffixes”.
[ id$=badge] ( /* Any element with an id that ends in "badge" */ transform: scale(0 . 5 , 0 .5 ) ; ) [ id$=title] ( transform: scale(1 . 8 ) translate(0px , 48px ) ; ) [ id$=details] ( transform: scale(0 , 0 ) ; )
Adding style for :hover and applying transitions
We select the elements inside the hovered group and turn them back into initial position. Then we set the transition 0.25s for a cool animation effect.
#timeline > g:hover [ id$=badge] , #timeline > g:hover [ id$=details] ( transform: scale(1 , 1 ) ; ) #timeline > g:hover [ id$=title] ( transform : scale(1 ) translate(0px , 0px ) ; ) [ id$=badge] , [ id$=title] , [ id$=details] ( transition: transform 0 .25s ease-in-out; )
Introduction to Animation
We use CSS animation. First, we need to create a few keyframes to animate some different CSS properties:
@keyframes left-brace-intro ( 0 % ( transform: translateX(220px ) ; opacity: 0 ; ) 50 % ( opacity: 1 ; transform: translateX(220px ) ; ) 100 % ( transform: translateX(0px ) ; ) ) @keyframes right-brace-intro ( 0 % ( transform: translateX(-220px ) ; opacity: 0 ; ) 50 % ( opacity: 1 ; transform: translateX(-220px ) ; ) 100 % ( transform: translateX(0px ) ; ) ) @keyframes fade-in ( 0 % (opacity: 0; ) 100 % ( opacity: 1 ; ) ) @keyframes grow-y ( 0 % ( transform: scaleY(0 ) ; ) 100 % ( transform: scaleY(1 ) ; ) ) @keyframes grow-x ( 0 % ( transform: scaleX(0 ) ; ) 100 % ( transform: scaleX(1 ) ; ) ) @keyframes grow ( 0 % ( transform: scale(0 , 0 ) ; ) 100 % ( transform: scale(1 , 1 ) ; ) )
Creating an Animation Sequence
We can use selectors based on the svgLoaded class we used earlier.
In order to set the animation sequence, we will set the animation-delay property, and set animation-fill-mode: backwards so that the animation will have pauses.
SvgLoaded #logo ( animation: fade-in 0 .5s ease-in-out; ) .svgLoaded #quote-text ( animation: fade-in 0 .5s ease-in-out 0 .75s ; animation-fill-mode: backwards ; ) .svgLoaded #quote-left-brace ( animation: left-brace-intro 1s ease-in-out 0 .25s ; animation-fill-mode: backwards; ) .svgLoaded #quote-right-brace ( animation: right- brace-intro 1s ease-in-out 0 .25s ; animation-fill-mode: backwards; ) .svgLoaded #background ( animation: grow-y 0 .5s ease-in-out 1 .25s ; transform-origin: 512px 300px ; animation-fill-mode: backwards; ) .svgLoaded #background > g ( animation: grow-x 0 .25s ease-in-out 1 .75s ; animation-fill-mode: backwards; ) .svgLoaded #background > g: last-of-type ( transform-origin: 458px 877px ; ) .svgLoaded #background > g:first-of-type ( transform-origin: 563px 877px ; ) .svgLoaded #coffee , .svgLoaded #design , .svgLoaded #build , .svgLoaded #complain , .svgLoaded #beer ( animation: grow 0 .25s ease-in-out; animation-fill-mode: backwards; ) .svgLoaded #coffee ( animation-delay: 2s; ) .svgLoaded #design ( animation-delay: 2 .25s ; ) .svgLoaded #build ( animation-delay: 2 .5s ; ) .svgLoaded #complain ( animation-delay: 2 .75s ; ) .svgLoaded #beer ( animation-delay: 3s; )
WEB fonts
Since we used custom fonts in our SVG file, we need to include them in our web page as well. It is important to correctly specify the name of the font that was used when exporting the SVG. We open the SVG file in a text editor and simply find the text where the font was used and look at the font-family property:
As we can see, the SVG file was exported using a font-family font named 'LeagueGothic'. So we just have to define the web font in CSS using the exact same name.
@font-face ( font-family : "LeagueGothic" ; url ( "../fonts/league-gothic/league-gothic.eot.woff") format("woff" ) ; )
This is all! We hope you enjoyed the tutorial and found it useful and informative. We'd love to hear your comments.
Translation - Duty room.
