beyond the bar chart - how to build better visualizations

Beyond the Bar Chart:How to Build Better Visualizations

Sean McHugh

#Logi16

SEAN MCHUGHLead Solutions ConsultantLogi Pro ServSean.McHugh@Logianalytics.com

Tech Enthusiast / BBQ Innovator / General Specialist

ABOUT ME

2 @Sean_McQ

#Logi16

• Identifying User Data Stories and Analysis Types

• Designing visuals to the data story

• How to execute your shiny new visuals

THINKING OUTSIDE OF THE BARCHART

3 @Sean_McQ

Building Better VisualizationsHow to build compelling data visualizations

Start with the right questionsDefining a User Data Story

#Logi16

It’s about how the user can use this data

What is a User Data Story?

6 @Sean_McQ

#Logi16

• Who – Who needs this data?

• What – What constraints does the data fall within?

• Where – What is the context that user exists in?

• Why – Why is this user bothering to look at this dashboard?

What is a User Data Story?

7 @Sean_McQ

#Logi16

What is a User Data Story?

8 @Sean_McQ

Context Purpose

#Logi16

What is a User Data Story?

9 @Sean_McQ

Remember the edge cases• No Data• No Change• Outlier Data• Too much data

Designing the VisualOnce we figure our User Data Story, how do we design a visual around it?

#Logi16

Designing the visual

11 @Sean_McQ

• Simple Chart

• Combo Chart

• Simple KPI

• Extension or Plugin

#Logi16

Designing the visual: Simple Chart

12 @Sean_McQ

• Good for conveying simple Relationships

• Easy to build in Logi Info• Tips:

– Remove all visual elements you don’t need

– Limit your color palette– One User Data Story– Visually Distinct

#Logi16

Logi Studio Walkthrough: Simple Chart

13 @Sean_McQ

#Logi16

Designing the visual

14 @Sean_McQ

• Simple Chart

• Combo Chart

• Simple KPI

• Extension or Plugin

#Logi16

Designing the visual: Combo Chart

15 @Sean_McQ

Chart Bashing TM

#Logi16

Designing the visual: Combo Chart

16 @Sean_McQ

• Conveys more complexity

• Simple to Develop

• Incredible Flexibility

#Logi16

Logi Studio Walkthrough: Combo Chart

17 @Sean_McQ

#Logi16

Logi Studio Walkthrough: Combo Chart

18 @Sean_McQ

#Logi16

Logi Studio Walkthrough: Combo Chart

19 @Sean_McQ

#Logi16

Logi Studio Walkthrough: Combo Chart

20 @Sean_McQ

#Logi16

Logi Studio Walkthrough: Combo Chart

21 @Sean_McQ

#Logi16

Designing the visual

22 @Sean_McQ

• Simple Chart

• Combo Chart

• Simple KPI

• Extension or Plugin

#Logi16

Designing the visual: KPI

23 @Sean_McQ

#Logi16

Designing the visual: KPI

24 @Sean_McQ

• Simple Visual Indicator

• Conveys call to action

• Typically CSS Driven

#Logi16

Designing the visual: KPI

25 @Sean_McQ

• Use in dense groups or dashboards

• Stand-alone use for maximum impact

• Best when used with clearly defined thresholds but not required

#Logi16

Logi Studio Walkthrough: KPI

26 @Sean_McQ

Conditional Classes CSS

#Logi16

Logi Studio Walkthrough: KPI

27 @Sean_McQ

#Logi16

Designing the visual

28 @Sean_McQ

• Simple Chart

• Combo Chart

• Simple KPI

• Extension or Plugin

#Logi16

Designing the visual: Extensions or Plugins

29 @Sean_McQ

• Use this when:– Convey specialized data– Other “special” cases

• Consider This:– Typically requires some

javascript– Design should remain

consistent

#Logi16

Logi Studio Walkthrough: KPI

30 @Sean_McQ

• Target Division Element

• Include JavaScript

• JSON Data

#Logi16

Logi Studio Walkthrough: KPI

31 @Sean_McQ

The Sky is the limitDon’t limit yourself to chart wizards and standard visualizations. Get creative, prototype and iterate on your designs.

Learn more in The Definitive Guide to Dashboard Design