Hi
Data Visualization &
HTML5
Chris Bannon
Agenda
1. Types of Data Visualization
2. Best Practices
3. Common Mistakes
4. HTML5 Tools
I’m Chris Bannon
Slightly more bearded
I started as a Designer
Va fan
(Please don’t tell anyone)
But I got tired of not
getting what I wanted from
Devs…
So I became a Developer
I learned JavaScript
I learned VisualBasic
Va fan
Then I finally learned a
real programming language
C#
Just kidding, I actually love
JavaScript
Yada, yada, yada… Now I
am a Product Manager
Va fan
“[Chris Bannon] is
someone who is probably
an excellent developer…”
John Goodall, Research Scientist
“…but someone who does
not really know what 'data
visualization' means.”
John Goodall, Research Scientist
Va fan
Why am I talking about
Data Visualization?
Because I work with it a lot
And I see a lot of bad
visualizations
I work for a company
called
We know Controls
(Since 1987)
On all Microsoft platforms
FlexGrid, Sizer, Spread,
ActiveReports, etc...
Focus on HTML5
Enough about us...
Let’s look at examples of
Data Visualization in
HTML5…
What is Data
Visualization?
“Communicate information clearly
and effectively through graphical
means”
Vitaly Friedman
“Data visualization takes the burden
of effort off brain and puts it on the
eyes.“
Stephen Few
Simplify
Summarize
Tell a story
Important now more than
ever
We are inundated with
data Today
Big Data
90% of world's data
generated over last two
years
SINTEF
Va fan
How do we decipher
Signal vs Noise
Address something that
matters
Stephen Few
Promote understanding
Stephen Few
Provide opportunity to take
action
Stephen Few
Your visualizations will be
used to make important
decisions
How do we visualize data?
Numbers
[apple,orange,banana,strawberry]
4 Fruits
Size
LargeSmall
Colors
Good
Normal
Bad
Charts
Wijmo Bar Chart
Wijmo Area Chart
Wijmo Column Chart
Wijmo Line Chart
Wijmo Candlestick Chart
Gauges
Wijmo Gauges
Grids & Tables
Wijmo Grid
Wijmo SpreadJS
And anything else that
*works*...
What are some best
practices?
The data should define the
design
Color palettes
Stephen Few
Format data by type and
context
1538120.2300
1,538,120.23
$1,538,120.23
$1,538,120
$1.5MM
Keep lines to a minimum
Remove background noise
Ensure important data is in
focus
What are some common
mistakes?
Pie Charts
Walter Hickey
Va fan
3D Effects
Stephen Few
Va fan
Manipulated Axis
NPR
Va fan
Distraction from data
Edward Tufte
Va fan
Omission of data
Wikipedia
Va fan
Putting it all together...
Dark Horse Analytics
What tools can help me
visualize data?
Past
Static Images
Plugins like Flash &
Silverlight
Then came mobile
Present
HTML & CSS
SVG
Vector
Markup defined graphic
DOM-friendly
Very efficient
Ideal for interactive
graphics
My favorite
Canvas
Raster
2D drawing surface
JavaScript API
Ideal for graphical
applications (requiring pixel
painting)
How do we bind data?
Make binding to live data
easy
Focus on the data model
Let the library update the
UI
What about power tools?
D3.js
Raphael.js
SnapSVG
JavaScript libraries for
drawing SVG
Powerful
Flexible
Steep learning curve
What if we don’t want to
write our own charts?
Use ready-made
JavaScript Controls
DataGrid, Charts, etc...
Properties, Methods &
Events
<wij-barchart dataSource="list">
<series-list>
<series label="Sales">
<data>
<x bind="Name" ></x>
<y bind="Sales"></y>
</d...
Save time
Spend more time focusing
on good Data Visualization
Let’s look at using
Controls…
Now, go make beautiful
data visualizations!
Test your IQ
http://www.perceptualedge.com/files/GraphDesignIQ.html
Thank you very much
References
• John Goodall http://jgoodall.me/posts/2012/03/25/wijmo/
• Vitaly Friedman http://www.smashingmagazine.com/200...
Data Visualization & HTML5 - Swedish Edition
Data Visualization & HTML5 - Swedish Edition
Data Visualization & HTML5 - Swedish Edition
Data Visualization & HTML5 - Swedish Edition
Data Visualization & HTML5 - Swedish Edition
Data Visualization & HTML5 - Swedish Edition
Data Visualization & HTML5 - Swedish Edition
Data Visualization & HTML5 - Swedish Edition
Data Visualization & HTML5 - Swedish Edition
Data Visualization & HTML5 - Swedish Edition
Data Visualization & HTML5 - Swedish Edition
Data Visualization & HTML5 - Swedish Edition
Upcoming SlideShare
Loading in …5
×

Data Visualization & HTML5 - Swedish Edition

4,045 views

Published on

HTML5 offers rich, new options for Data Visualization like SVG and Canvas. We will look at the new technology available in HTML5 as well as tools to help leverage it. Wijmo is a jQuery library that makes cross-browser charting with SVG easy. We will use it to build some killer dashboards in HTML5. We’ll also take a look at some good (and bad) practices for properly visualizing data. This session will walk you through the basics of Data Visualization in HTML5.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,045
On SlideShare
0
From Embeds
0
Number of Embeds
2,904
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Data Visualization & HTML5 - Swedish Edition

  1. 1. Hi
  2. 2. Data Visualization & HTML5 Chris Bannon
  3. 3. Agenda 1. Types of Data Visualization 2. Best Practices 3. Common Mistakes 4. HTML5 Tools
  4. 4. I’m Chris Bannon
  5. 5. Slightly more bearded
  6. 6. I started as a Designer
  7. 7. Va fan (Please don’t tell anyone)
  8. 8. But I got tired of not getting what I wanted from Devs…
  9. 9. So I became a Developer
  10. 10. I learned JavaScript
  11. 11. I learned VisualBasic
  12. 12. Va fan
  13. 13. Then I finally learned a real programming language
  14. 14. C#
  15. 15. Just kidding, I actually love JavaScript
  16. 16. Yada, yada, yada… Now I am a Product Manager
  17. 17. Va fan
  18. 18. “[Chris Bannon] is someone who is probably an excellent developer…” John Goodall, Research Scientist
  19. 19. “…but someone who does not really know what 'data visualization' means.” John Goodall, Research Scientist
  20. 20. Va fan
  21. 21. Why am I talking about Data Visualization?
  22. 22. Because I work with it a lot
  23. 23. And I see a lot of bad visualizations
  24. 24. I work for a company called
  25. 25. We know Controls (Since 1987)
  26. 26. On all Microsoft platforms
  27. 27. FlexGrid, Sizer, Spread, ActiveReports, etc...
  28. 28. Focus on HTML5
  29. 29. Enough about us...
  30. 30. Let’s look at examples of Data Visualization in HTML5…
  31. 31. What is Data Visualization?
  32. 32. “Communicate information clearly and effectively through graphical means” Vitaly Friedman
  33. 33. “Data visualization takes the burden of effort off brain and puts it on the eyes.“ Stephen Few
  34. 34. Simplify
  35. 35. Summarize
  36. 36. Tell a story
  37. 37. Important now more than ever
  38. 38. We are inundated with data Today
  39. 39. Big Data
  40. 40. 90% of world's data generated over last two years SINTEF
  41. 41. Va fan
  42. 42. How do we decipher Signal vs Noise
  43. 43. Address something that matters Stephen Few
  44. 44. Promote understanding Stephen Few
  45. 45. Provide opportunity to take action Stephen Few
  46. 46. Your visualizations will be used to make important decisions
  47. 47. How do we visualize data?
  48. 48. Numbers
  49. 49. [apple,orange,banana,strawberry] 4 Fruits
  50. 50. Size
  51. 51. LargeSmall
  52. 52. Colors
  53. 53. Good Normal Bad
  54. 54. Charts
  55. 55. Wijmo Bar Chart
  56. 56. Wijmo Area Chart
  57. 57. Wijmo Column Chart
  58. 58. Wijmo Line Chart
  59. 59. Wijmo Candlestick Chart
  60. 60. Gauges
  61. 61. Wijmo Gauges
  62. 62. Grids & Tables
  63. 63. Wijmo Grid
  64. 64. Wijmo SpreadJS
  65. 65. And anything else that *works*...
  66. 66. What are some best practices?
  67. 67. The data should define the design
  68. 68. Color palettes
  69. 69. Stephen Few
  70. 70. Format data by type and context
  71. 71. 1538120.2300 1,538,120.23 $1,538,120.23 $1,538,120 $1.5MM
  72. 72. Keep lines to a minimum
  73. 73. Remove background noise
  74. 74. Ensure important data is in focus
  75. 75. What are some common mistakes?
  76. 76. Pie Charts
  77. 77. Walter Hickey
  78. 78. Va fan
  79. 79. 3D Effects
  80. 80. Stephen Few
  81. 81. Va fan
  82. 82. Manipulated Axis
  83. 83. NPR
  84. 84. Va fan
  85. 85. Distraction from data
  86. 86. Edward Tufte
  87. 87. Va fan
  88. 88. Omission of data
  89. 89. Wikipedia
  90. 90. Va fan
  91. 91. Putting it all together...
  92. 92. Dark Horse Analytics
  93. 93. What tools can help me visualize data?
  94. 94. Past
  95. 95. Static Images
  96. 96. Plugins like Flash & Silverlight
  97. 97. Then came mobile
  98. 98. Present
  99. 99. HTML & CSS
  100. 100. SVG
  101. 101. Vector
  102. 102. Markup defined graphic
  103. 103. DOM-friendly
  104. 104. Very efficient
  105. 105. Ideal for interactive graphics
  106. 106. My favorite
  107. 107. Canvas
  108. 108. Raster
  109. 109. 2D drawing surface
  110. 110. JavaScript API
  111. 111. Ideal for graphical applications (requiring pixel painting)
  112. 112. How do we bind data?
  113. 113. Make binding to live data easy
  114. 114. Focus on the data model
  115. 115. Let the library update the UI
  116. 116. What about power tools?
  117. 117. D3.js Raphael.js SnapSVG
  118. 118. JavaScript libraries for drawing SVG
  119. 119. Powerful
  120. 120. Flexible
  121. 121. Steep learning curve
  122. 122. What if we don’t want to write our own charts?
  123. 123. Use ready-made JavaScript Controls
  124. 124. DataGrid, Charts, etc...
  125. 125. Properties, Methods & Events
  126. 126. <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
  127. 127. Save time
  128. 128. Spend more time focusing on good Data Visualization
  129. 129. Let’s look at using Controls…
  130. 130. Now, go make beautiful data visualizations!
  131. 131. Test your IQ http://www.perceptualedge.com/files/GraphDesignIQ.html
  132. 132. Thank you very much
  133. 133. 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

×