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 [email protected]

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?


7 @Sean_McQ

#Logi16


8 @Sean_McQ

Context Purpose

#Logi16


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


14 @Sean_McQ

• Simple Chart

• Combo Chart

• Simple KPI


#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


18 @Sean_McQ

#Logi16


19 @Sean_McQ

#Logi16


20 @Sean_McQ

#Logi16


21 @Sean_McQ

#Logi16


22 @Sean_McQ

• Simple Chart

• Combo Chart

• Simple KPI


#Logi16

Designing the visual: KPI

23 @Sean_McQ

#Logi16


24 @Sean_McQ

• Simple Visual Indicator

• Conveys call to action

• Typically CSS Driven

#Logi16


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


27 @Sean_McQ

#Logi16


28 @Sean_McQ

• Simple Chart

• Combo Chart

• Simple KPI


#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


30 @Sean_McQ

• Target Division Element

• Include JavaScript

• JSON Data

#Logi16


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

https://goo.gl/2IPpZL

https://goo.gl/2IPpZL

Beyond the Bar Chart - How to Build Better Visualizations

Data & Analytics

Transcript of Beyond the Bar Chart - How to Build Better Visualizations