beyond the bar chart - how to build better visualizations
TRANSCRIPT
![Page 1: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/1.jpg)
Beyond the Bar Chart:How to Build Better Visualizations
Sean McHugh
![Page 2: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/2.jpg)
#Logi16
SEAN MCHUGHLead Solutions ConsultantLogi Pro [email protected]
Tech Enthusiast / BBQ Innovator / General Specialist
ABOUT ME
2 @Sean_McQ
![Page 3: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/3.jpg)
#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
![Page 4: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/4.jpg)
Building Better VisualizationsHow to build compelling data visualizations
![Page 5: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/5.jpg)
Start with the right questionsDefining a User Data Story
![Page 6: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/6.jpg)
#Logi16
It’s about how the user can use this data
What is a User Data Story?
6 @Sean_McQ
![Page 7: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/7.jpg)
#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
![Page 8: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/8.jpg)
#Logi16
What is a User Data Story?
8 @Sean_McQ
Context Purpose
![Page 9: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/9.jpg)
#Logi16
What is a User Data Story?
9 @Sean_McQ
Remember the edge cases• No Data• No Change• Outlier Data• Too much data
![Page 10: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/10.jpg)
Designing the VisualOnce we figure our User Data Story, how do we design a visual around it?
![Page 11: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/11.jpg)
#Logi16
Designing the visual
11 @Sean_McQ
• Simple Chart
• Combo Chart
• Simple KPI
• Extension or Plugin
![Page 12: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/12.jpg)
#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
![Page 13: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/13.jpg)
#Logi16
Logi Studio Walkthrough: Simple Chart
13 @Sean_McQ
![Page 14: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/14.jpg)
#Logi16
Designing the visual
14 @Sean_McQ
• Simple Chart
• Combo Chart
• Simple KPI
• Extension or Plugin
![Page 15: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/15.jpg)
#Logi16
Designing the visual: Combo Chart
15 @Sean_McQ
Chart Bashing TM
![Page 16: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/16.jpg)
#Logi16
Designing the visual: Combo Chart
16 @Sean_McQ
• Conveys more complexity
• Simple to Develop
• Incredible Flexibility
![Page 17: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/17.jpg)
#Logi16
Logi Studio Walkthrough: Combo Chart
17 @Sean_McQ
![Page 18: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/18.jpg)
#Logi16
Logi Studio Walkthrough: Combo Chart
18 @Sean_McQ
![Page 19: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/19.jpg)
#Logi16
Logi Studio Walkthrough: Combo Chart
19 @Sean_McQ
![Page 20: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/20.jpg)
#Logi16
Logi Studio Walkthrough: Combo Chart
20 @Sean_McQ
![Page 21: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/21.jpg)
#Logi16
Logi Studio Walkthrough: Combo Chart
21 @Sean_McQ
![Page 22: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/22.jpg)
#Logi16
Designing the visual
22 @Sean_McQ
• Simple Chart
• Combo Chart
• Simple KPI
• Extension or Plugin
![Page 23: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/23.jpg)
#Logi16
Designing the visual: KPI
23 @Sean_McQ
![Page 24: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/24.jpg)
#Logi16
Designing the visual: KPI
24 @Sean_McQ
• Simple Visual Indicator
• Conveys call to action
• Typically CSS Driven
![Page 25: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/25.jpg)
#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
![Page 26: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/26.jpg)
#Logi16
Logi Studio Walkthrough: KPI
26 @Sean_McQ
Conditional Classes CSS
![Page 27: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/27.jpg)
#Logi16
Logi Studio Walkthrough: KPI
27 @Sean_McQ
![Page 28: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/28.jpg)
#Logi16
Designing the visual
28 @Sean_McQ
• Simple Chart
• Combo Chart
• Simple KPI
• Extension or Plugin
![Page 29: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/29.jpg)
#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
![Page 30: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/30.jpg)
#Logi16
Logi Studio Walkthrough: KPI
30 @Sean_McQ
• Target Division Element
• Include JavaScript
• JSON Data
![Page 31: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/31.jpg)
#Logi16
Logi Studio Walkthrough: KPI
31 @Sean_McQ
![Page 32: Beyond the Bar Chart - How to Build Better Visualizations](https://reader033.vdocuments.net/reader033/viewer/2022042907/58780b051a28ab971e8b5b09/html5/thumbnails/32.jpg)
The Sky is the limitDon’t limit yourself to chart wizards and standard visualizations. Get creative, prototype and iterate on your designs.