making use of data visualization for software development
TRANSCRIPT
1
Ming Huang@panintelligence@mingzhi_huang
07/2015
Making Use of Data Visualization for Software
Development
2
What we do
• Information dashboard for Business Intelligence• Mission: Enabling better decisions• Core values: innovative, open, supportive
About me
• Software Frontend Architect at Panintelligence• Web Frontend Development for 7 - 8 years• Responsible for reengineering Panintelligence dashboard
@panintelligence @mingzhi_huang
3
What we do
• Information dashboard for Business Intelligence• Mission: Enabling better decisions• Core values: innovative, open, supportive
About me
• Software Frontend Architect at Panintelligence• Web Frontend Development for 7 - 8 years• Responsible for reengineering Panintelligence dashboard
@panintelligence @mingzhi_huang
5
Introduction
Shorten cycleQuicker feedback
WHY
Why Agile?
Why Lean?
@panintelligence @mingzhi_huang
6
Incremental learning to minimize the risk of wrong decisions
Shorten cycleQuicker feedback
WHY
Introduction
Why Agile?
Why Lean?
Benefit
@panintelligence @mingzhi_huang
9
Introduction
Data
How do we learn?
Task estimationAudit dataTimesheet dataApplication data …
@panintelligence @mingzhi_huang
10
Introduction
Data
Are you making good usage of your data?
Purpose• show how to make use
of data visualization to learn from data
• How to improve data visualization
How do we learn?
Task estimationAudit dataTimesheet dataApplication data …
@panintelligence @mingzhi_huang
11
Agenda
@panintelligence @mingzhi_huang
What is data visualization
Why data visualization
How to improve data
visualization
Colours Enhancements
Examples
12
What & Why
@panintelligence @mingzhi_huang
How to improve data
visualization
Colours Enhancements
What is data visualization
Why data visualization Examples
15
What & Why
@panintelligence @mingzhi_huang
How to improve data
visualization
Colours Enhancements
What is data visualization
Why data visualization Examples
16
Why Data Visualization 1
@panintelligence @mingzhi_huang
To find out number of sales calls by Date
17
Why Data Visualization 1
@panintelligence @mingzhi_huang
To find out number of sales calls by Date
Data
18
Why Data Visualization 1
@panintelligence @mingzhi_huang
To find out number of sales calls by Date
Data Visualization
Data
19
Why Data Visualization 1
@panintelligence @mingzhi_huang
To find out number of sales calls by Date
Data Visualization
Data
20
Why Data Visualization 1
@panintelligence @mingzhi_huang
To find out number of sales calls by Date
Data Visualization
Data
21
Why Data Visualization 1
@panintelligence @mingzhi_huang
To find out number of sales calls by Date
Data Visualization
Data
22
Why Data Visualization 2
@panintelligence @mingzhi_huang
Slowly digest the information
No need to show you street names at this level
23
Why Data Visualization 2
@panintelligence @mingzhi_huang
Slowly digest the information
No need to show you street names at this level
Shows street names…And some pubs
24
Why Data Visualization 2
@panintelligence @mingzhi_huang
Slowly digest the information
No need to show you street names at this level
Shows street names…And some pubs
Can you imagine what the data looks like for this?
25
Why Data Visualization 2
@panintelligence @mingzhi_huang
Navigates information step by step to help digesting
26
Why Data Visualization 2
@panintelligence @mingzhi_huang
Navigates information step by step to help digesting
Restrict to north
27
Why Data Visualization 2
@panintelligence @mingzhi_huang
Navigates information step by step to help digesting
Restrict to north
Restrict to Newcastle
28
Why Data Visualization 2
@panintelligence @mingzhi_huang
Navigates information step by step to help digesting
Restrict to north
Restrict to Newcastle
H Jones in detail
29
Why Data Visualization 3
@panintelligence @mingzhi_huang
With a BI tool, the related SQL results can be grouped together
31
Why Data Visualization - summary
@panintelligence @mingzhi_huang
Shows overall pattern
Helps digesting information step by step
32
Why Data Visualization - summary
Shows overall pattern
@panintelligence @mingzhi_huang
Helps digesting information step by step
Groups related information
33
What & Why
@panintelligence @mingzhi_huang
How to improve data
visualization
Colours Enhancements
What is data visualization
Why data visualization Examples
34
Why Data Visualization - Examples
Data Visualization only matters, when it shows the information that is relevant to the users.
@panintelligence @mingzhi_huang
35
Why Data Visualization - Examples
Data Visualization only matters, when it shows the information that is relevant to the users.
@panintelligence @mingzhi_huang
Software Development
What do we care about?
37
Why Data Visualization - Track Dev
@panintelligence @mingzhi_huang
Sprint Burn down
Mike the Boss
20 days sprint???
38
Why Data Visualization - Track Dev
@panintelligence @mingzhi_huang
Sprint Burn downPoints completed by developers
Tasks completed by developers
39
Why Data Visualization - Track Dev
@panintelligence @mingzhi_huang
Sprint Burn downPoints completed by developers
Tasks completed by developers
40
Why Data Visualization - Track Dev
@panintelligence @mingzhi_huang
Sprint Burn downPoints completed by developers
Tasks completed by developers
Boss cares about
42
Why Data Visualization - Track Dev
@panintelligence @mingzhi_huang
I just like to work, no need to sleep
???
K
M
Mike the Boss
43
Why Data Visualization - Track Dev
@panintelligence @mingzhi_huang
I just like to work, no need to sleep
I just like to sleep, I don’t want to work
???
K
M
Mike the Boss
44
Why Data Visualization – Track Dev
@panintelligence @mingzhi_huang
M
Actually, 3 weeks holidays at the beach
I just like to sleep, I don’t want to work
45
Why Data Visualization - Track Dev
@panintelligence @mingzhi_huang
New requirements???
Mike the Boss
46
Why Data Visualization - Track Dev
@panintelligence @mingzhi_huang
New requirements
I don’t like SQL
???
Mike the Boss
49@panintelligence @mingzhi_huang
Why Data Visualization - Summary
Track feature usage
Track development
Learn from data,Make better decisions
51
Choosing Colours
@panintelligence @mingzhi_huang
How to improve data
visualization
Colours Enhancements
What is data visualization
Why data visualization Examples
54
Choosing Colours
• Bright colours are generally used to represent exceptions
@panintelligence @mingzhi_huang
56
Colour for Exceptions
• What would you guess orange means? (in the same dashboard)
• Take a guess about what red means
@panintelligence @mingzhi_huang
57
Colour for Exceptions
Suggestions• Better to use the same colour to represent the same meaning
@panintelligence @mingzhi_huang
58
Choosing Colours
• Can you easily tell what information in here is important?• Why more important?
@panintelligence @mingzhi_huang
59
Choosing Colours
• How about this one?• How many of them are important items?
@panintelligence @mingzhi_huang
60
Choosing Colours
• How about this one?• How many of them are important items?
@panintelligence @mingzhi_huang
61
Choosing Colours
• Regular: bright• Exceptions: bright
• Regular: muted• Exceptions: bright
• Regular: dark• Exceptions: bright
@panintelligence @mingzhi_huang
62
Choosing Colours
Which one highlights the exceptions?
• Regular: bright• Exceptions: bright
• Regular: muted• Exceptions: bright
• Regular: dark• Exceptions: bright
@panintelligence @mingzhi_huang
63
Suggestions
• Better using the same colour to represent the same meaning
@panintelligence @mingzhi_huang
64
Suggestions
• Better using the same colour to represent the same meaning
Better using:• Regular: muted• Exceptions: bright
@panintelligence @mingzhi_huang
65
How to improve data
visualization
Colours Enhancements
Enhancements - what helps understanding
@panintelligence @mingzhi_huang
What is data visualization
Why data visualization Examples
67
• Is 2014 performing well or not? • Compared to last year, what do you think?
Enhancements - comparison
@panintelligence @mingzhi_huang
68
• This shows the proportions
Enhancements - ordering
Performance of different cities
@panintelligence @mingzhi_huang
69
• This shows the proportions • How about providing alphabetical ordering?
Enhancements - ordering
Performance of different cities
@panintelligence @mingzhi_huang
70
Performance of different cities
• This shows the proportions • How about providing alphabetical ordering?
• How about providing proportion ordering?
Enhancements - ordering
@panintelligence @mingzhi_huang
71
Enhancements - scale
• What’s the difference between these two charts?
@panintelligence @mingzhi_huang
72
• What if we add the axes?• Have you noticed the axes are actually the same?
Enhancements - scale
@panintelligence @mingzhi_huang
74
• How about these two?• Have you noticed the starting points are different?
Enhancements - scale
@panintelligence @mingzhi_huang
75
Enhancements - scale
When putting related information together
Would this be even more confusing?
Option 1
@panintelligence @mingzhi_huang
76
When putting related information together
Would this be even more confusing?
How about this?
Option 1
Option 2
Enhancements - scale
@panintelligence @mingzhi_huang
77
Enhancements - what helps understanding
• Comparison provides context
@panintelligence @mingzhi_huang
78
Enhancements - what helps understanding
• Comparison provides context
• Ordering adds meaning
@panintelligence @mingzhi_huang
79
• Comparison provides context
• Ordering adds meaning
• Consistent axes reduces misunderstanding
Enhancements - what helps understanding
@panintelligence @mingzhi_huang