The document discusses various approaches and principles of data visualization in product design, emphasizing understanding the audience, data quality, context, and clear communication. It outlines steps to effectively present data, ensuring accessibility and engagement. Key principles highlighted include knowing the audience, understanding data context, and simplifying communication.

1. D ATA V I S U A L I Z AT I O N
I N P R O D U C T
P R O D U C T C A M P B O S T O N 2 0 1 6
C T O D D L O M B A R D O
C H I E F D E S I G N S T R A T E G I S T - F R E S H T I L L E D S O I L
@ I A M C T O D D

2. W H AT D O Y O U S E E ?

3. W H AT D O Y O U S E E ?

4. I II III IV
x y x y x y x y
10.0 8.04 10.0 9.14 10.0 7.46 8.0 6.58
8.0 6.95 8.0 8.14 8.0 6.77 8.0 5.76
13.0 7.58 13.0 8.74 13.0 12.74 8.0 7.71
9.0 8.81 9.0 8.77 9.0 7.11 8.0 8.84
11.0 8.33 11.0 9.26 11.0 7.81 8.0 8.47
14.0 9.96 14.0 8.10 14.0 8.84 8.0 7.04
6.0 7.24 6.0 6.13 6.0 6.08 8.0 5.25
4.0 4.26 4.0 3.10 4.0 5.39 19.0 12.50
12.0 10.84 12.0 9.13 12.0 8.15 8.0 5.56
7.0 4.82 7.0 7.26 7.0 6.42 8.0 7.91
5.0 5.68 5.0 4.74 5.0 5.73 8.0 6.89
99.0 82.51 99.0 82.51 99.0 82.5 99.0 82.51
9.00 7.50 9.00 7.50 9.00 7.50 9.00 7.50
3.32 2.03 3.32 2.03 3.32 2.03 3.32 2.03

5. I II III IV
x y x y x y x y
10.0 8.04 10.0 9.14 10.0 7.46 8.0 6.58
8.0 6.95 8.0 8.14 8.0 6.77 8.0 5.76
13.0 7.58 13.0 8.74 13.0 12.74 8.0 7.71
9.0 8.81 9.0 8.77 9.0 7.11 8.0 8.84
11.0 8.33 11.0 9.26 11.0 7.81 8.0 8.47
14.0 9.96 14.0 8.10 14.0 8.84 8.0 7.04
6.0 7.24 6.0 6.13 6.0 6.08 8.0 5.25
4.0 4.26 4.0 3.10 4.0 5.39 19.0 12.50
12.0 10.84 12.0 9.13 12.0 8.15 8.0 5.56
7.0 4.82 7.0 7.26 7.0 6.42 8.0 7.91
5.0 5.68 5.0 4.74 5.0 5.73 8.0 6.89
99.0 82.51 99.0 82.51 99.0 82.5 99.0 82.51
9.00 7.50 9.00 7.50 9.00 7.50 9.00 7.50
3.32 2.03 3.32 2.03 3.32 2.03 3.32 2.03

12. E X A M P L E S
D A S H B O A R D

18. S O U R C E : H T T P : / / S Q L - J O I N S . L E O PA R D . I N . U A /

19. W H AT A B O U T M O B I L E ?

20. S O U R C E : B R I G H T P O I N T I N C . C O M

25. W H E R E D O Y O U S TA R T ?
H O W - T O

26. D ATA C O N S U M E R

27. D ATA E N C O D E C O N S U M E R

28. D ATA E N C O D E C O N S U M E RV I S U A L I Z AT I O N

29. D ATA E N C O D E D E C O D E C O N S U M E RV I S U A L I Z AT I O N

30. T H E R E A R E M A N Y A P P R O A C H E S …

31. T H E R E A R E M A N Y A P P R O A C H E S …
A C Q U I R E PA R S E F I LT E R M I N E R E P R E S E N T R E F I N E I N T E R A C T

32. T H E R E A R E M A N Y A P P R O A C H E S …
A C Q U I R E PA R S E F I LT E R M I N E R E P R E S E N T R E F I N E I N T E R A C T
C L A R I F Y W H AT & W H Y E X P L O R E & S K E T C H D E F I N E & P R O D U C E M A I N TA I N & A N A LY Z E

33. T H E R E A R E M A N Y A P P R O A C H E S …
A C Q U I R E PA R S E F I LT E R M I N E R E P R E S E N T R E F I N E I N T E R A C T
C L A R I F Y W H AT & W H Y E X P L O R E & S K E T C H D E F I N E & P R O D U C E M A I N TA I N & A N A LY Z E
A C Q U I R E C L E A N I N T E G R AT E V I S U A L I Z E M O D E L P R E S E N T D I S S E M I N AT E

34. T H E R E A R E M A N Y A P P R O A C H E S …
A C Q U I R E PA R S E F I LT E R M I N E R E P R E S E N T R E F I N E I N T E R A C T
C L A R I F Y W H AT & W H Y E X P L O R E & S K E T C H D E F I N E & P R O D U C E M A I N TA I N & A N A LY Z E
A C Q U I R E C L E A N I N T E G R AT E V I S U A L I Z E M O D E L P R E S E N T D I S S E M I N AT E
E S TA B L I S H
C O N T E X T
A C Q U I R E &
P R E PA R E D ATA
E D I T O R I A L
F O C U S
D E S I G N
C O N S T R U C T &
E VA L U AT E

35. T H E R E A R E M A N Y A P P R O A C H E S …
A C Q U I R E PA R S E F I LT E R M I N E R E P R E S E N T R E F I N E I N T E R A C T
C L A R I F Y W H AT & W H Y E X P L O R E & S K E T C H D E F I N E & P R O D U C E M A I N TA I N & A N A LY Z E
A C Q U I R E C L E A N I N T E G R AT E V I S U A L I Z E M O D E L P R E S E N T D I S S E M I N AT E
E S TA B L I S H
C O N T E X T
A C Q U I R E &
P R E PA R E D ATA
E D I T O R I A L
F O C U S
D E S I G N
C O N S T R U C T &
E VA L U AT E
K N O W T H E
A U D I E N C E
K N O W T H E
D ATA
U N D E R S TA N D
C O N T E X T
C O M M U N I C AT E
S I M P LY
C O M M U N I C AT E
C L E A R LY

36. K N O W T H E
A U D I E N C E
K N O W T H E
D ATA
U N D E R S TA N D
C O N T E X T
C O M M U N I C AT E
S I M P LY
C O M M U N I C AT E
C L E A R LY
P R O D U C T V I S U A L I Z AT I O N D E S I G N A P P R O A C H

37. V I S U A L I Z AT I O N D E S I G N P R I N C I P L E S

38. V I S U A L I Z AT I O N D E S I G N P R I N C I P L E S
• Elegant
• Truthful
• Accessible
• Justified

39. 1. Know the audience
2. Know the data
3. Know the story
4. Communicate simply
5. Communicate clearly
V I S U A L I Z AT I O N D E S I G N P R I N C I P L E S
• Elegant
• Truthful
• Accessible
• Justified

40. 1 . K N O W T H E A U D I E N C E

41. 1 . K N O W T H E A U D I E N C E
• What questions do they have?

42. 1 . K N O W T H E A U D I E N C E
• What questions do they have?
• How will they use this information to make decisions?

43. 1 . K N O W T H E A U D I E N C E
• What questions do they have?
• How will they use this information to make decisions?
• What level of familiarity do they have with the source data?

44. 1 . K N O W T H E A U D I E N C E
• What questions do they have?
• How will they use this information to make decisions?
• What level of familiarity do they have with the source data?
• How often will they be using this information?

45. 1 . K N O W T H E A U D I E N C E
• What questions do they have?
• How will they use this information to make decisions?
• What level of familiarity do they have with the source data?
• How often will they be using this information?
• What level of sophistication do they with analytics/statistics?

46. 1 . K N O W T H E A U D I E N C E
• What questions do they have?
• How will they use this information to make decisions?
• What level of familiarity do they have with the source data?
• How often will they be using this information?
• What level of sophistication do they with analytics/statistics?
• Is your visualization more exploratory or explanatory?

47. A U D I E N C E A S K S
Q U E S T I O N ,
S E E S D ATA ,
G E T S A N S W E R
A U D I E N C E S E E S D ATA ,
A S K Q U E S T I O N S ,
E X P L O R E S D ATA ,
G E T S A N S W E R

48. 2 . K N O W T H E D ATA

49. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?

50. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?

51. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?
• How old/new is the data?

52. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?
• How old/new is the data?
• What are the inherent relationships between values?

53. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?
• How old/new is the data?
• What are the inherent relationships between values?
• What other data can we combine with it?

54. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?
• How old/new is the data?
• What are the inherent relationships between values?
• What other data can we combine with it?
• What assumptions will you have to make?

55. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?
• How old/new is the data?
• What are the inherent relationships between values?
• What other data can we combine with it?
• What assumptions will you have to make?
• Does a data dictionary exist?

61. C O R R E L AT I O N ≠ C A U S AT I O N

62. H T T P : / / W W W. T Y L E R V I G E N . C O M / S P U R I O U S - C O R R E L AT I O N S

63. 3 . U N D E R S TA N D T H E C O N T E X T

64. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?

65. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?
• How is the data insightful or interesting to your user?

66. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?
• How is the data insightful or interesting to your user?
• Why is your finding occurring or not occurring?

67. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?
• How is the data insightful or interesting to your user?
• Why is your finding occurring or not occurring?
• How will this help your users?

68. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?
• How is the data insightful or interesting to your user?
• Why is your finding occurring or not occurring?
• How will this help your users?
• What decisions will they need to make?

69. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?
• How is the data insightful or interesting to your user?
• Why is your finding occurring or not occurring?
• How will this help your users?
• What decisions will they need to make?
• What are their next steps?

71. Things that make you go “Hmmm…”

72. 4 . C O M M U N I C AT E S I M P LY

73. 4 . C O M M U N I C AT E S I M P LY
• How long does it take for your audience to arrive at your conclusion?

74. 4 . C O M M U N I C AT E S I M P LY
• How long does it take for your audience to arrive at your conclusion?
• Is the message delivered accurately & consistently?

75. 4 . C O M M U N I C AT E S I M P LY
• How long does it take for your audience to arrive at your conclusion?
• Is the message delivered accurately & consistently?
• [Interactive] How many clicks to find the answer to their question?

76. 4 . C O M M U N I C AT E S I M P LY
• How long does it take for your audience to arrive at your conclusion?
• Is the message delivered accurately & consistently?
• [Interactive] How many clicks to find the answer to their question?
• Where do they go in your app next?

77. O H D E A R . .
B E C A U S E Y O U C A N . . S H O U L D Y O U ?

80. 5 . C O M M U N I C AT E C L E A R LY

81. 5 . C O M M U N I C AT E C L E A R LY
• What are the key findings & messages?

82. 5 . C O M M U N I C AT E C L E A R LY
• What are the key findings & messages?
• What is the right way to visualize the findings?

83. 5 . C O M M U N I C AT E C L E A R LY
• What are the key findings & messages?
• What is the right way to visualize the findings?
• How do they interpret the data?

84. 5 . C O M M U N I C AT E C L E A R LY
• What are the key findings & messages?
• What is the right way to visualize the findings?
• How do they interpret the data?
• What decisions will they make from this visualization?

85. 5 . C O M M U N I C AT E C L E A R LY
• What are the key findings & messages?
• What is the right way to visualize the findings?
• How do they interpret the data?
• What decisions will they make from this visualization?
• Is it easy to understand the findings?

89. A D A M M C C A N N , TA B L E A U Z E N M A S T E R
If the meaning of the data is not conveyed,
the visualization is a failure.

90. D ATA : I N K R AT I O

92. S O U R C E : B R I G H T P O I N T I N C . C O M

94. D A S H B O A R D S

95. — S H N E I D E R M A N
“Overview First, Zoom and Filter,
Then Details-on-Demand”

96. T H E S E V E N TA S K S O F I N F O V I Z U S E R S
• Overview: Gain an overview of the entire collection.
• Zoom : Zoom in on items of interest
• Filter: Filter out uninteresting items.
• Details-on-demand: Select an item or group and get details when needed
• Relate: View relationships among items.
• History: Keep a history of actions to support undo, replay, and query parameters.
• Extract: Allow extraction of sub-collections and of the progressive refinement.

97. G O O D E X A M P L E S

99. D ATA V I S U A L I Z AT I O N
T H A N K S !