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?
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.
Top Related