The document is a presentation about data visualization and HTML5 tools. It discusses types of data visualization, best practices, common mistakes, and HTML5 tools for creating visualizations like Canvas, SVG, and JavaScript libraries. It emphasizes designing visualizations based on the data, using colors and formatting appropriately, and avoiding pitfalls like pie charts and distorted axes. Ready-made controls can help build charts without writing custom code. The goal is to clearly communicate patterns in data.

1. Hi

2. Data Visualization &
HTML5
Chris Bannon

3. Agenda
1. Types of Data Visualization
2. Best Practices
3. Common Mistakes
4. HTML5 Tools

4. I’m Chris Bannon

5. Slightly more bearded

8. I started as a Designer

9. Va fan
(Please don’t tell anyone)

10. But I got tired of not
getting what I wanted from
Devs…

11. So I became a Developer

12. I learned JavaScript

13. I learned VisualBasic

14. Va fan

15. Then I finally learned a
real programming language

16. C#

17. Just kidding, I actually love
JavaScript

18. Yada, yada, yada… Now I
am a Product Manager

19. Va fan

20. “[Chris Bannon] is
someone who is probably
an excellent developer…”
John Goodall, Research Scientist

21. “…but someone who does
not really know what 'data
visualization' means.”
John Goodall, Research Scientist

22. Va fan

23. Why am I talking about
Data Visualization?

24. Because I work with it a lot

25. And I see a lot of bad
visualizations

26. I work for a company
called

28. We know Controls
(Since 1987)

29. On all Microsoft platforms

30. FlexGrid, Sizer, Spread,
ActiveReports, etc...

32. Focus on HTML5

34. Enough about us...

35. Let’s look at examples of
Data Visualization in
HTML5…

36. What is Data
Visualization?

37. “Communicate information clearly
and effectively through graphical
means”
Vitaly Friedman

38. “Data visualization takes the burden
of effort off brain and puts it on the
eyes.“
Stephen Few

40. Simplify

41. Summarize

42. Tell a story

43. Important now more than
ever

44. We are inundated with
data Today

45. Big Data

46. 90% of world's data
generated over last two
years
SINTEF

47. Va fan

48. How do we decipher
Signal vs Noise

49. Address something that
matters
Stephen Few

50. Promote understanding
Stephen Few

51. Provide opportunity to take
action
Stephen Few

52. Your visualizations will be
used to make important
decisions

53. How do we visualize data?

54. Numbers

55. [apple,orange,banana,strawberry]
4 Fruits

56. Size

57. LargeSmall

58. Colors

59. Good
Normal
Bad

60. Charts

61. Wijmo Bar Chart

62. Wijmo Area Chart

63. Wijmo Column Chart

64. Wijmo Line Chart

65. Wijmo Candlestick Chart

66. Gauges

67. Wijmo Gauges

68. Grids & Tables

69. Wijmo Grid

70. Wijmo SpreadJS

71. And anything else that
*works*...

72. What are some best
practices?

73. The data should define the
design

74. Color palettes

75. Stephen Few

76. Format data by type and
context

77. 1538120.2300
1,538,120.23
$1,538,120.23
$1,538,120
$1.5MM

78. Keep lines to a minimum

79. Remove background noise

80. Ensure important data is in
focus

81. What are some common
mistakes?

82. Pie Charts

83. Walter Hickey

84. Va fan

85. 3D Effects

86. Stephen Few

87. Va fan

88. Manipulated Axis

89. NPR

90. Va fan

91. Distraction from data

92. Edward Tufte

93. Va fan

94. Omission of data

95. Wikipedia

96. Va fan

97. Putting it all together...

98. Dark Horse Analytics

99. What tools can help me
visualize data?

100. Past

101. Static Images

102. Plugins like Flash &
Silverlight

103. Then came mobile

104. Present

105. HTML & CSS

106. SVG

108. Vector

109. Markup defined graphic

110. DOM-friendly

112. Very efficient

113. Ideal for interactive
graphics

114. My favorite

115. Canvas

117. Raster

118. 2D drawing surface

119. JavaScript API

120. Ideal for graphical
applications (requiring pixel
painting)

121. How do we bind data?

124. Make binding to live data
easy

125. Focus on the data model

126. Let the library update the
UI

127. What about power tools?

128. D3.js
Raphael.js
SnapSVG

129. JavaScript libraries for
drawing SVG

130. Powerful

131. Flexible

132. Steep learning curve

133. What if we don’t want to
write our own charts?

134. Use ready-made
JavaScript Controls

136. DataGrid, Charts, etc...

137. Properties, Methods &
Events

138. <wij-barchart dataSource="list">
<series-list>
<series label="Sales">
<data>
<x bind="Name" ></x>
<y bind="Sales"></y>
</data>
</series>
</series-list>
</wij-barchart>
AngularJS & Wijmo Directive Markup

139. Save time

140. Spend more time focusing
on good Data Visualization

141. Let’s look at using
Controls…

142. Now, go make beautiful
data visualizations!

143. Test your IQ
http://www.perceptualedge.com/files/GraphDesignIQ.html

144. Thank you very much

145. References
• John Goodall http://jgoodall.me/posts/2012/03/25/wijmo/
• Vitaly Friedman http://www.smashingmagazine.com/2008/01/14/monday-inspiration-data-visualization-and-
infographics/
• Stephen Few http://www.perceptualedge.com
• SINTEF http://www.sintef.no/home/Press-Room/Research-News/Big-Data--for-better-or-worse/
• Google https://support.google.com/drive/answer/1047428?hl=en
• NPR http://www.npr.org/blogs/itsallpolitics/2013/02/13/171935151/chart-check-did-obama-s-graphics-enhance-
his-big-speech
• Edward Tufte http://www.edwardtufte.com/tufte/
• Walter Hickey http://www.businessinsider.com/pie-charts-are-the-worst-2013-6
• Wikipedia http://en.wikipedia.org/wiki/Misleading_graph
• Dark Horse Analytics http://darkhorseanalytics.com/
• D3 http://d3js.org
• Wijmo http://wijmo.com
• IQ Test http://www.perceptualedge.com/files/GraphDesignIQ.html