Squeeze your DataViz to the ultimate: the art of Visualization part II

Geschreven door Iver van de Zand op

 

brainScience teaches us that the human brain can get a sense of a visual scene in less than 1/10th of a second. 90% of information transmitted to the brain is visual. And most impressive: visuals are processed 60.000x faster in the brain than text. All of this helps us understand the value and power of data visualizations when interpreting company performance or insights. Data visualizations and infographics are your best choice for helping business users quickly and accurately understanding their performance drivers. They pin-point the users attention immediately to the things that require action or further analysis ……… but, …… do they really? … well,.. they do, if you create your visualizations correctly and respect some basic guidelines.

In a previous post on the Art of Visualization, we already discussed some of the best practices I learned. Now it is time to explore a little deeper. I will highlight some of my personal lessons-learned I picked up from customer discussions. The focus is on visualizations and infographics. Visualizations are made to get visual insight in a certain metric, KPI or information-aspect. Infographics then use these visualizations and combine them into an overview that provides the overall insight.

Visualizations

Time series & Animation:

Times series are best done using a Line chart. Lines should only directly connect values in adjacent intervals; if data is missing, indicate it is missing. Ensure your intervals are always equal in size. When you have various metrics and use combination charts, ensure to have synchronized X-axis. To better the readability of the visualization, I prefer using subtle grey gridlines. In case you use bar charts or a combined bar/line chart, do never overlap bars and ensure some space between contiguous bars. Use soft colors and be careful with tick mark values. If you want to compare metrics in a time series line chart, work with variances against a base line. Below examples show the worse and the better way of visualizing.

Capture

If you want to highlight when specific exceptions in data occurred over time, you might want to use animated graphs. I use it sometimes when creating bubble charts indicating exactly when a correlation in data is off expectations.

Bullet Graphs:

Bullet charts are highly useful when you have a key measure, a comparative measure (goal/target) and a qualitative measure. Typical example is the insight in actuals versus forecast and budget. Bullet charts serve the visualization of KPI’s very well.

Heat maps:

The heat map is very useful if you are looking for white-spot analyses. White-spot analyses are used to immediately recognize areas not covered very well in a certain domain. For example sales numbers per product and per country: the heat map immediately indicates what products in what countries do very bad and are white spotted. Close to heat maps are the tree maps that you best use in cases that large numbers of values exceed the number that effectively can be shown in a bar chart. On top tree maps offer “heat- indicators” if you use color coding smartly.

D3 charts:

exampleThe Internet is full of open source D3 charts, here an example. Tools like SAP Lumira are capable of using them. The D
3 charts often look stunning. But be aware: quite often they serve one very specific purpose or objective. Though this can be perfect for that purpose, but users tend to interact with data, an change visualization-types on the fly. If you did find the ultimate D3 for your objective, ensure to lock it to end users so they can’t change the chart/graph type. If you use SAP Lumira, check out this link where the best D3 visualizations are selected already for you.

InfoGraphics

Avoid the “Christmas-tree”:

Especially in our domain of data visualizations, the paradigm of “less is more” rules. Oh yes, I know todays self-service tools allow to fill you infographic with bells and whistles, but please try to be in the place of the consumer of your infographic. They will quickly get confused and are defocussed on what you really want to tell.

Filters & Cloud tags:

pic2When my infographics have filters where users tend to make large multiple selection, I always add a linked tag- cloud to the filter so people easily see what they have selected. I use the technique in the freely available tool I build for choosing the right BI component where users may select multiple functional requirements to a BI tool of choice.

Interactivity:

In my post “Let me Interact”, we talked about your meeting that will never be the same, since people now require to constantly interact with their visualizations and infographics. They want to change filtering, drill-down of granularity on the fly. They want to rank, highlight or zoom in on data during meeting’s discussions. They want to exclude or include certain data sources that might come from outside.

Landing pages:

In cases your infographics need to become closer to dashboards and cover multiple different info-areas, you probably use multiple Tabs or Pages in your final results. In these cases I, for navigation purposes, always advise to create a landing page as you page/tab 1. You use this page to create URL-links to the specific areas, and you can use the landing page to share specific info (assumptions, scope etc). I also use it if you want the user to set filters that apply the full dashboard; this saves space on the individual pages/tabs and your users need to set the filter only once.

Chart interconnectivity:

If you have multiple visualizations on an Infographic, ensure they are inter-related at least on the level of one page or tab. When people now drill or zoom on one visualization, it applies also all other visualizations which guarantees consistency in insights.

Branding & Color coding:

pic3Unfortunately I am a guy that is part of the community who don’t have “the feeling” for choosing the correct colors. I often find it difficult to look for appropria
te colors not only in the graph, but also for background, symbols or accompanying pictures. The trick is in using Adobe Color. With this tool (also available on mobile devices) you can take a picture of a preferred scenery with numerous focus points, and it automatically  finds good accompanying colors even providing the RGB codes. Very useful!

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+Email this to someone

This post is also available in: Dutch, French

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>