InfoGraphics


When I posted on the history of Microsoft, I got interested in infographics. Now I’m not a design or marketing person I woudl say in relation I am more of a Data Viz kinda guy, but I’ve noticed that not all infographics are created equally. On Art Of Blog, there is an article that tries to introduce the reader to the “art” of making infographics, but amounts to little more then a brief overview (o.k. I’m occasionally guilty of this so I can’t be too hard on the author).   But let’s look at what the components of an infographic are  (IMHO).

What is an Infographic?

Information graphics or infographics are graphic visual representations of information, data or knowledge intended to present complex information quickly and clearly. They can improve cognition by utilizing graphics to enhance the human visual system’s ability to see patterns and trends. The process of creating infographics can be referred to as data visualization, information design, or information architecture–Wikipedia

Types of Infographic

Infographics fall into a spectrum between a Crystal Clear depiction of a single concept/topic and a Conglomeration of aspects of a problem, usually with the intent to inform the viewer/reader the scope of a concept/problem.

Unitopical

Real Hourly Minimum Wages Around The World

Real Hourly Minimum Wages Around The World by lisamahapatra.

For information which has a lot of data points but only one real slice, usually this is represented as a simple categorical bar graphs or line charts, or I think it could be argued all of the representations we would be exposed to in a Math or Stats class. These are ubiquitous in society today, you can rarely look at any data without seeing it as being displayed by this approach. The strengths of this approach are that they can convey facts very well (assuming the data is valid/truthful). Often you will see this representation as a component of a larger Infographic, and or mixed into itself (such as a line chart where the data points are represented as different types of other charts). Unitopical infographics are best suited for situations where hard data needs to be presented clearly.

UniConceptual

Connecting Syria

Connecting Syria’s allies and enemies by AlJazeera.
Mapping Syria Mapping Syria’s rebellion by AlJazeera.

Infographics from this category are trying to convey a more complex idea or concept take for example this infographic which attempts to illuminate the political landscape of Syria in 2013, where the Venn Diagrams, and relationships presented are used to convey the authors “pertinent” information. Note that if you click on a data point additional information is displayed. Compare this to the next Infographic on a very similar topic where you get to see the inner working of the military landscape  inside Syria, but which also indicates connections to foreign governments. 

Static

No doubt the first infographic you ever saw in elementry school was static, most likely in the weekly reader (if your childhood education was anything like rural american childhood). If not in your childhood, then they were defiantly shown to you during your math/algebra/stats/social studies class.

Interactive

These infographics are best used when trying to teach cause and effect type relationships, to engage the viewer and most importantly to look cool ☺. An engaged viewer is much more interested in absorbing or actually learning the material. Armed with the ability to interact with those datapoints that viewer or user will be more likely to want to explore your info.

Aesthetics

The aesthetics of infographics are what has lead to their impressive rise in popularity recently, after all why show a boring bar chart on fish populations when you can jazz it up with bars that are schools of fish on a aquatic or watery background (or maybe lengths of kelp).  Notice the difference in how you feel about the data being presented. Both graphs represent the same amount of data, yet I get the impression  the the right hand side is more comical and less accurate. I would be more inclined to show the left to people I wanted to know the numbers, and the right to people I wanted to understand the relationship.

…not bad for 5 minutes worth of work?

Approach

Sometimes it is more about how you approach the data presented, here are two ( – 0f 10) representations of the meta-cognative-spatial relativism of the primary scene of the story line. The top one, IMHO clearly shows in the horizontal bars that on the plane the first level was in a van, then the hotel, mountains, rundown building, and in limbo the fancy mansion. It shows who goes to each level, What the kicks are, when Inception happens and what the relative time scales are. In infographic number two, some of the same information is displayed, but adding the rotational aspect to the already complicated concepts makes it a little harder to understand what is happening. However the second one does make it easier to understand how the time is compressed so you can understand what that means and really looks like. There are some websites out there to help you make a template based infographic however in my opinion the templates will only rarely work with the theme or concept that you will want to present, but here they are (in no particular order):

However you may be better of technically if you were to go out and actually develop the graphics yourself, if you wanted to go and do that, then you may want to look into D3.js (the image collection to the right). Between SVG, D3.js, Knockout and css3 in HTML5 you can make amazing infographics that are interactive and responsive and navigable!

Advertisements

About Larry Louisiana

I'm a Microsoft Partner Consultant.
This entry was posted in Uncategorized. Bookmark the permalink.

One Response to InfoGraphics

  1. Pingback: Infographic Misdirection and Bias Influencing | Ely Bob's space

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s