Data Visualisation Techniques with Web Intelligence

[Former Member]

Scenario

Visualise [Sales Revenue] by [Quarter] for the [Last 3 Years].

Example

The data visualisation below is an example of what is produced by Web Intelligence out of the box (i.e. default).

What is wrong with this visualisation?

• Misuse of Colour - When viewed at a glance, a user may believe Blue is good and Orange is bad? Our eyes need to constantly flick between the legend and the bars to understand which colour relates to which year. The default colour choice does not provide much value.

• X & Y Axis Titles - Do we need them? Would a heading (e.g. Sales Revenue by Quarter: 2004 - 2006) not provide sufficient context? When we see values such as Q1, Q2, Q3 the user understands these are Quarters.

• Gridlines & Value Axis - Are gridlines and the Y-axis adding any value? We can't tell the actual value of each bar regardless of their presence.

• Whitespace - There is a large amount of whitespace above the bars and around the legend. Could we make better use of that space to emphasise the shapes of the bars?

Here is an example using the same data but adhering to some data visualisation best practices using standard Web Intelligence functionality.

1. Remove titles from the X and Y axis. The combination of a descriptive heading (e.g. Sales Revenue by Quarter: 2004 - 2006) and actual values (e.g. 2004, 2005 & Q1, Q2, etc) provide sufficient context.
2. Remove background grid lines, this will increase our Data-Ink ratio.
3. Change the colour palette to monochrome (available in Web Intelligence 4.0), this fading of blue from light to dark enables the user to draw a relationship between lighter being further in the past and darker being closer to the present.
4. Change the position of the legend to the top to minimise white space.
5. Change the x-axis line to a less jarring colour to emphasise the bars (e.g. Grey - 25%).
6. Change the font colour to a less jarring colour to further emphasise the bars (e.g. Grey - 40%)
7. Force a custom MAX for the value axis so that the highest bar is equal to the MAX Y-axis value (reducing white space further).

Note: If the values of the individual bars are deemed critical to the story, we can turn them on but rather than leaving the default format, scale the number to a level of precision that enables the user to consume the information as quickly as possible without losing relevancy.

Colour Palette - Web Intelligence 4.0 vs. 4.1

Something to be mindful of, Web Intelligence 4.0 is restricted to a fixed number of palettes.

Web Intelligence 4.1 introduces a Custom colour palette which can provide users more flexibility. Highly recommend reading Stephen Few's - Uses and Misuses of Color for further learning and understanding on how to use colour appropriately and when it could be misused.