How to Create Interactive Infographics: A Beginner's Guide to Data Visualization. Infographics: types, examples of work, future
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, such as PNG, JPG or GIF, vector graphics in SVG files are completely 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 the 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. You can view the demo or download the source code 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 by 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 the 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 block 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 run 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 to their original 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'll 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
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. 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 is needed in the picture, it appears during scrolling
(The fourth point is 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
#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 manual design work; based on algorithms. For example, the interactive work of the 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 is what 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 open-source JavaScript library on the market. source code, 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 among web designers, which is largely due to how advantageous vector graphics look like 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 many 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 an interactive visualization. Get to know the basic principles graphic design, which a journalist needs to know.
The course instructors are five of the world's leading experts in data journalism and visualization.
Over the past few years, infographics have evolved from static images to rich, interactive experiences with animation and video elements tailored to unique content. It is no longer limited to pre-prepared, universal templates. And today's selection contains the best examples of infographics that demonstrate what an interesting and informative experience looks like.
Most of the infographics in this list were chosen to show the different ways designers approach data visualization. However, there are also a few “hybrids” here that illustrate the blurring of the lines between infographics and rich media experiences when creating engaging content and compelling stories on landing pages. Deviating from traditional forms means we are entering more complex media territory, and it is this kind of experimentation with technology and storytelling that will be critical to shaping the future of graphic design.
1. Wind map
The Wind Map is a breathtaking piece of design that shows wind direction and speed over the United States. This design has an artistic rather than a utilitarian purpose, and this is wonderful: it is very pleasant to just sit and watch how the thin, thin threads wind across the map. A simple but well-thought-out example of how infographics showing shape trajectories benefit from animation and moving images.
2. In flight
In 2014, The Guardian launched an infographic called In Flight, which showed real-time data on commercial flights (it doesn't seem to be updated anymore, which is a shame) and also included a lesson on the history of aviation. The hushed conversations between air crews at the start of the interactive show create a special atmosphere. It seems like infographics are slowly turning into cinematic experiences these days. At least "In Flight" points in that direction...
3. Dial Moon
There's not much going on in the Dial A Moon infographic, but it serves its purpose pretty well. In 2015, thanks to NASA, infographics of the lunar phases were updated every hour, and there was no need to go to Google in search of this mysterious information. Now you can view pictures by manually entering the month, day and time.
4. Day with Pluto
Nature magazine publishes a lot of interesting infographics for its science-interested audience. Among them was one about the famous spacecraft flyby near Pluto (24 Hours Of Pluto). The infographic included a lot text information, but the visuals provided easy insight into the highlights, from the structure of the dwarf planet to the process by which its moons formed. The text part is now available on the Internet, as well as two animated videos from the infographic.
5. How American houses have changed
Take a journey through the great American Dream as reflected through the evolution of home styles. This well-illustrated infographic lets you get behind the wheel of a car (which also changes its appearance as you scroll to keep up with the era) and navigate your way from the 1900s to the 2000s, passing buildings that were popular during individual decades. On this path you will meet many useful materials(including the socio-political conditions of the time, as well as fashion trends), and it all ends with a question that challenges you to imagine the future of the American home. The Decades Of American Homes infographic is a great example of horizontal scrolling, and it comes in handy here.
6. The evolution of marketing analytics
In its Evolution of Insight infographic, user intelligence company Vision Critical tracks the development of the marketing technology market around the world from the 1890s to the present day. It functions similarly to the How American Homes Have Changed infographic, and thus allows you to compare the effectiveness of using an interactive timeline for two very different stories. The Decades Of American Homes infographic has the benefit of seeing homes as you drive your car, which is much more intuitive than driving down the great American analytics. Good infographics are created around the content, not around it.
7. LGBT rights around the world
The Guardian grabs another spot on our list with this nifty infographic explaining the legal landscape of LGBT rights across a range of issues (marriage, workplace discrimination, hate crimes, etc.) in every state in the world. Moving around the semicircle provides a quick and easy way to compare statistics between different countries, and the infographic's composition keeps the global status front and center. There is also powerful call to action, with the goal of bridging the gap between simple awareness of the problem and activism.
8. Inequality is fixable.
Another great example of an interactive infographic, Inequality Is Fixable, invites the audience to dive into an issue while making it deeply personal. The viewer is guaranteed to remain interested in material that tells him or her how much his/her boss is underpaying and why. By making the user part of the story, developers pique curiosity and guide the user through all the necessary steps right to the Call-To-Action at the end.
“We let it happen—how can we fix it now?”
9. Draw for yourself: How family income predicts a child's chances of going to college
Many of the infographics on this list use animation and interactivity to provide a rich experience. Visually, this infographic from the New York Times (You Draw It: How Family Income Predicts Children's College Chances) adheres to the classic chart format, but it also uses understanding of user behavior to expand the scope of infographic design, namely the technique of proactive and interactive visualization. By asking readers to draw their own curve, they introduce an element of self-interest and thus provide people with truly valuable information.
Not the worst result! The vertical axis is the percentage of children who went to college. Horizontal axis: parental income percentile
10. How Americans Die
With the exception of the title image, this example uses mostly just good old-fashioned charts to visualize the content. But this is not at all boring, since users can independently navigate through the data by moving the cursor along the graphs. This makes it much easier to compare, for example, the number of suicide-related deaths in the 70s compared to now (hint: it's on the rise now), something a static chart wouldn't do as neatly.
11.
Since Snowfall debuted to widespread attention and praise, The New York Times has maintained its reputation for excellence in multimedia journalism. The publication team uses a combination of infographic design and in-depth storytelling to create an impressively engaging experience. They have more striking examples, but The Russia Left Behind is a work that has caused a certain resonance. The infographic functions as an interactive tour of Russia (you navigate your way on a map).
12. Bond's cars
If you ever want to experience the history of James Bond by looking at his cars, then thank British car dealer Evans Halshaw for giving you the chance. His interactive Bond Cars infographic allows you to explore the make and design of each of Bond's cars, plus some additional fun facts. Using the ubiquitous slider tactic, you can also "reveal" the car in all its metallic glory (only a single-color design is given by default). This is how the authors creatively solved the problem of the need to include photographs that do not quite fit the aesthetics of the infographic.
13. Colors of movement
The Colors Of Motion is an infographic series that analyzes films based solely on their color palette, derived from combining all the frames. If you've ever wondered, now you have the answer. Can't find a title in the database? Just send the developers a message - they accept requests.
14. Royal tomb in Peru
National Geographic has a pretty impressive collection of what they call "interactive graphics" (most of which are accompanied by detailed text descriptions, as in the case of Trajan's Column, for example), but we chose this relatively simple example to highlight which techniques are truly effective in interactive infographics. “Peru’s Royal Wari Tomb” reveals the peculiarities of the burial of a noblewoman of those times. The focus moves from the mummy's wrappings to its decorations and position. By dividing information into small pieces and allowing the user to navigate between them, interactive graphics avoid the most insidious pitfalls: data overload and visual effects. Moreover, each subsequent interaction enhances the experience, making it much more rewarding than if everything were presented at once. Our brain has a mechanism that rejects overwhelming stimuli, and this type interaction becomes an excellent solution for the user, making it easy to absorb information.
15. What is the “Scottish Referendum”? Explanation for non-British people
The Guardian, like the New York Times, is committed to multimedia journalism, and their video does a great job of one of the main functions of infographics: putting cumbersome information into manageable form. For many of us living outside the UK, the referendum is a very confusing topic. Luckily, this video (Scottish Referendum Explained For Non-Brits) will help you quickly learn about it. important aspects, without requiring a deep dive into history.
16. Public health
The Atlantic's mission was to develop a vision for improving public health. It commissioned Truth Labs to develop a 3-part series on “Population Health” into digital storytelling. The artist's main goal was to preserve the natural scrolling of the document and the user's normal reading experience, while creating an experience that differs from a visual perspective. To bring it to life, they borrowed tools and strategies from film, but also relied on a set of design principles to support readability as a key rule.
17. Joho’s grains
Austrian coffee producer Joho's has created an immersive multimedia experience, Joho's Bean, to tell the story of the origins of the coffee bean. The narrative seamlessly combines audio, video and photography to engage almost all of the user's senses. As you follow a farmer through a coffee plantation, you hear , the sound of birds chirping, the sound of roasted coffee beans being packed in bags, and the sound of busy streets and traffic in the city. Total immersion!
Joho's takes you on a journey explaining the origins of their coffee beans
18. Pristine road
The Wild Path is an interactive travelogue experience created using Canvas. The main element is the map, which animates the path on the map as you scroll the page. The project may not work in all browsers. But it comes with an accompanying article that explains all the behind-the-scenes technologies for creating infographics.
19.
The Guardian's coverage of the 2016 US presidential election (Live Election Results) brought a fun element to the serious business of poll numbers and polling stations. An interactive infographic tracked votes in four states. By default, the graph showed results for the entire country, and if the user hovered over an area on the map, it showed which numbers the candidates scored there. Presidential candidates were presented as funny pixelated avatars. As the infographic was updated in real time, the people colored in the states they won. From time to time, a quote would appear in a bubble next to the candidate.
Reflection of election results in real time
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 needs to be highlighted how many countries still have limited access to clean toilets and how little this has changed in the last 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. Here's 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. The number of templates available in the free versions of the tools is 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.
What is interactive infographics? This is a question our clients increasingly ask us. Until recently, a small number of agencies and studios even understood what we're talking about, but today communication companies that keep up with the times are required not only to include in the price list this service, but also perform it efficiently. Unfortunately, not everyone can do this yet.
There are several types and definitions of interactive infographics.
First: interactive infographics are infographics that involve the reader in controlling the data displayed. Interactivity is created using Flash or JavaScript, HTML 5 technologies.
Second: any infographic that allows you to change the data displayed in graphical form online.
Projects to create interactive infographics are only gaining momentum due to their high complexity and cost. One of the striking examples of interactive infographics was the project “Who congratulated Lukashenko on his presidency”, 2011.
Infographics, updated interactively, made it possible to see which of the heads of state congratulated A.G. Lukashenko with the 2010 elections. The data displayed on the infographic could be selected by the president's photo, the country's flag, in a table or on a globe. Thus, the user himself chose which data he was interested in and which would be shown. In the table, it was also possible to sort countries by the length of time the head of state was in power at the time of congratulations, by the state of rights and freedoms, quality of life, freedom of the press, de facto democratic elections and rating of dictators. The availability of congratulations was checked on the official websites of the presidents and changed manually.
Since launch this project Quite a lot of time has passed, and today many experts are trying to make interactive infographics change information automatically. Although, this seriously affects the project budget.
Large Western companies were among the first to use interactive infographics as a means of building a reputation or increasing user loyalty, which understood the value of displaying compressed information in dynamics and the possibility of involving its users.
Some types of infographics allow you to interactively adjust some parameters and get interesting data. For example, the user is asked a question to enter a certain number, after which the graph or diagram changes before his eyes - a completely new information material is obtained, the creation of which he himself became a direct participant in.
So, for example, on the third anniversary of the browser Chrome company Google has visualized the history of the development of technologies and programs for viewing web pages: we strongly recommend that you follow the link and enjoy the colorful spectacle of interactive infographics in best traditions west.
In the example mentioned above, users of the main Internet browsers Explorer 9+, Firefox 4+, Safari 4+, Chrome 10+, Opera 11+ could see two decades of advancement in the technologies used in browsers - from http protocol to offline AppCache applications.
Russian companies have not yet mastered interactive infographics, since even simple infographics today are not available to everyone in good quality. Despite the fact that the service for creating interactive infographics is rather a new product Russian market, our agency is ready to perform such tasks today, since this format is becoming more and more in demand. The cost of this service is high because similar technologies are isolated and always strictly individual, which requires the creation of a software product with “0” for each task.
