Data Visualization & HTML5 - Swedish Edition
Download as PPTX, PDF4 likes5,227 views
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.
![“[Chris Bannon] is
someone who is probably
an excellent developer…”
John Goodall, Research Scientist](https://image.slidesharecdn.com/datavisualizationinhtml5-140527122316-phpapp02/85/Data-Visualization-HTML5-Swedish-Edition-20-320.jpg)
![[apple,orange,banana,strawberry]
4 Fruits](https://image.slidesharecdn.com/datavisualizationinhtml5-140527122316-phpapp02/85/Data-Visualization-HTML5-Swedish-Edition-55-320.jpg)
More Related Content
Similar to Data Visualization & HTML5 - Swedish Edition (20)
Data Visualization & HTML5 - Swedish Edition
- 1. Hi
- 2. Data Visualization & HTML5 Chris Bannon
- 3. Agenda 1. Types of Data Visualization 2. Best Practices 3. Common Mistakes 4. HTML5 Tools
- 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
- 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
- 35. Let’s look at examples of Data Visualization in HTML5…
- 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
- 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
- 56. Size
- 57. LargeSmall
- 58. Colors
- 59. Good Normal Bad
- 60. Charts
- 61. Wijmo Bar Chart
- 62. Wijmo Area Chart
- 64. Wijmo Line 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
- 78. Keep lines to a minimum
- 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
- 92. Edward Tufte
- 93. Va fan
- 94. Omission of data
- 95. Wikipedia
- 96. Va fan
- 97. Putting it all together...
- 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
- 110. DOM-friendly
- 112. Very efficient
- 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?
- 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?
- 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!
- 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