Visualizing Data with Infographics
Doug Antkowiak Apr 25 2011
Need to explain the evolution of the internet in less than five minutes? Or maybe demonstrate an R analysis of the length of baseball games over the last 30 years? Try using an infographic.
Infographics (informational graphics) are one of the best ways to display complex data or conceptual information in a quick and easy-to-read format. Often used by educators, journalists and mathematicians, infographics allow a presenter the ability to illustrate a vast amount of information in a less-intimidating medium. The nature of the graphic is to help an audience digest data in a more entertaining way compared to an essay or research study.
Dissecting the Infographic
You know how a picture is worth a thousand words? What’s a picture with words and graphs worth? The conventional infographic combines pictures, illustrations, text and sometimes video to tell a story. It generally follows these rules:
- A visual explanation to help the reader understand a message
- A method of revealing information that might otherwise be hidden
- A stand alone message that is completely self-explanatory
Infographics can tell a story as simple as when it’s safe to cross the street, to the complexities of a tsunami as it crosses the Pacific. The trick is to tell the story using a theme. Here are a few traditional themes used to build an infographic.
Be it a sequence of events or the evolution of a product, timelines are the preferred method of demonstrating how something changes over time. It’s the most effective way to show the history of a subject chronologically.
Most statistics-oriented infographics rely on bar and line graphs, pie charts or some other physical representation to display numerical information. One of the reasons statistical graphics are so effective at sharing information is their ability to stimulate both sides of the brain: The left side activates with the visual cues of size and color, and the right side of the brain bridges the gap between visual relationships and statistical labels.
Not all statistics infographics have to be a sea of numbers and percentages. This Consumer Reports graphic is an excellent example of revealing the shrinking package sizes in supermarkets while avoiding a full-fledged geek-out on the reader.
One of the earliest forms of displaying information graphically, maps are used to show size, distance and relationships between subjects. To help convey information, most maps use symbols, diagrams, lines and keys to label objects, or to define scales and ratios.
Map infographics don’t have to be limited to defining land masses either. Check out this Map of Online Communities. While completely out of date (come on, look at the size of Friendsterland), this is an awesome example of how to view the size differences between these social networks in 2007.
Flowchart infographics aren’t as graphically stimulating as statistics or map based graphics, but they do a great job of showing a step-by-step algorithm or process. Flowcharts work by establishing a question (red box), and point to a decision (diamond), which may or may not lead to a process (green box).
Flowcharts are not to be confused with data flow diagrams, which are ideal for explaining the relationship of multiple subjects within a system.
System infographics are ideal for displaying how a continual system operates and reacts. Comparing similar systems like this Human Subway Map is a great way to convey information because it compares an example an audience might encounter on a daily basis (like a subway map) and to an otherwise complex or unseen system.
Why stick with one theme? Some of the best infographics on the internet combine statistical analysis, flow charts, graphs and maps to create an all-encompassing information hub. It’s a lot of information, so these infographics can take up a ton of room. When creating an infographic for an online audience, it’s best to layout the information vertically because readers are more accustom to scrolling up and down as opposed to side to side. This NFL graphic is a good example of how to build a vertical combination infographic.
- How to use Intention.js for Responsive Design
- What Does a Degree in Architecture Have to Do with Web Design & Development?
- A Front-End Workflow For The Evolving Web
- Stop Writing Blog Posts: Ideas for Interactive Content
- Parallax Scrolling? HTML5 Animations? Why We’re Falling for New Design Techniques
- Portent.com: They’ve gone to plaid