Making use of data visualization for software development

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


Twitter

4

Introduction

Why Agile?

Why Lean?


5

Introduction

Shorten cycleQuicker feedback

WHY

Why Agile?

Why Lean?


6

Incremental learning to minimize the risk of wrong decisions

Shorten cycleQuicker feedback

WHY

Introduction

Why Agile?

Why Lean?

Benefit


7

Introduction

How do we learn?


8

Introduction

Data

How do we learn?


9

Introduction

Data

How do we learn?

Task estimationAudit dataTimesheet dataApplication data …


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 …


11

Agenda


What is data visualization

Why data visualization

How to improve data

visualization

Colours Enhancements

Examples

12

What & Why


How to improve data

visualization



Why data visualization Examples

13

What is Data Visualization

Data


14

What is Data Visualization

Data Data Visualization


15

What & Why


How to improve data

visualization




16

Why Data Visualization 1


To find out number of sales calls by Date

17




Data

18




Data Visualization

Data

19




Data Visualization

Data

20




Data Visualization

Data

21




Data Visualization

Data

22



Slowly digest the information

No need to show you street names at this level

23





Shows street names…And some pubs

24





Shows street names…And some pubs

Can you imagine what the data looks like for this?

25



Navigates information step by step to help digesting

26




Restrict to north

27




Restrict to north

Restrict to Newcastle

28




Restrict to north

Restrict to Newcastle

H Jones in detail

29



With a BI tool, the related SQL results can be grouped together

30

Why Data Visualization - summary


Shows overall pattern

31




Helps digesting information step by step

32




Helps digesting information step by step

Groups related information

33

What & Why


How to improve data

visualization




34

Why Data Visualization - Examples

Data Visualization only matters, when it shows the information that is relevant to the users.


35

Why Data Visualization - Examples

Data Visualization only matters, when it shows the information that is relevant to the users.


Software Development

What do we care about?

36

Why Data Visualization - Track Dev


Sprint Burn down

37



Sprint Burn down

Mike the Boss

20 days sprint???

38



Sprint Burn downPoints completed by developers

Tasks completed by developers

39





40





Boss cares about

41



K

M

Mike the Boss

???

42



I just like to work, no need to sleep

???

K

M

Mike the Boss

43



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


M

Actually, 3 weeks holidays at the beach

I just like to sleep, I don’t want to work

45



New requirements???

Mike the Boss

46



New requirements

I don’t like SQL

???

Mike the Boss

47@panintelligence @mingzhi_huang

Why Data Visualization – Track Usage


Why Data Visualization - Track Usage


Why Data Visualization - Summary

Track feature usage

Track development

Learn from data,Make better decisions

50

How do we improve data visualization?


51

Choosing Colours


How to improve data

visualization




52

Choosing Colours

• What do the red and the yellow mean?


53

Choosing Colours

• What do the red and the yellow mean?


54

Choosing Colours

• Bright colours are generally used to represent exceptions


55

Colour for Exceptions

• Take a guess about what red means


56


• What would you guess orange means? (in the same dashboard)

• Take a guess about what red means


57


Suggestions• Better to use the same colour to represent the same meaning


58

Choosing Colours

• Can you easily tell what information in here is important?• Why more important?


59

Choosing Colours

• How about this one?• How many of them are important items?


60

Choosing Colours

• How about this one?• How many of them are important items?


61

Choosing Colours

• Regular: bright• Exceptions: bright

• Regular: muted• Exceptions: bright

• Regular: dark• Exceptions: bright


62

Choosing Colours

Which one highlights the exceptions?

• Regular: bright• Exceptions: bright

• Regular: muted• Exceptions: bright

• Regular: dark• Exceptions: bright


63

Suggestions

• Better using the same colour to represent the same meaning


64

Suggestions

• Better using the same colour to represent the same meaning

Better using:• Regular: muted• Exceptions: bright


65

How to improve data

visualization


Enhancements - what helps understanding




66

• Is 2014 performing well or not?

Enhancements - comparison


67

• Is 2014 performing well or not? • Compared to last year, what do you think?

Enhancements - comparison


68

• This shows the proportions

Enhancements - ordering

Performance of different cities


69

• This shows the proportions • How about providing alphabetical ordering?




70


• This shows the proportions • How about providing alphabetical ordering?

• How about providing proportion ordering?



71

Enhancements - scale

• What’s the difference between these two charts?


72

• What if we add the axes?• Have you noticed the axes are actually the same?



73


• How about these two?


74

• How about these two?• Have you noticed the starting points are different?



75


When putting related information together

Would this be even more confusing?

Option 1


76

When putting related information together

Would this be even more confusing?

How about this?

Option 1

Option 2



77


• Comparison provides context


78



• Ordering adds meaning


79


• Ordering adds meaning

• Consistent axes reduces misunderstanding



80

Conclusion


Data visualization improves understanding

Enhancement supports- Comparison- Ordering (Data connection)- Consistent scale

Colours- Consistent colours- Bright for exceptions- Muted for less important