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 use it. Wijmo is a jQuery library that makes charting in SVG easy and work in every browser. We will use it to build some killer dashboards in HTML5. With Wijmo we can create bar charts, line charts and pie charts with just a single line of jQuery. We can use simple html tables to get data from or load in data using Ajax. This session will walk you through from the basics to advanced data visualization in HTML5.

1. Data Visualization in HTML5 Chris Bannon

2. about:me Chris Bannon Product Manager http://banzor.us @b4nn0n “Banzor”

3. Data visualization is the study of the visual representation of data. I prefer binary

4. Why Visualize? Find Patterns and Correlations Summarize Large Data Sets Understanding Information Because you are human…

5. How Do We Visualize Data? Charts Gauges Maps Sizes/Colors

6. Don’t Thimk So Hard See trends instantly Make quick decisions Comprehend millions of data points Stop guessing Who doesn’t love stats?

7. Visualization Can Save Lives http://www.motherboard.tv/2011/1/28/was-space-shuttle-challenger-a-casualty-of-bad-data-visualization

8. …Beware of Evil Visualizations! Pie charts suck* Change origin of axis Data Omission Misleading relationships I’m looking at you Politicians and Media!

9. Yesterday’s News

10. Today’s Technology 1337!

11. HTML5 Graphics SVG (Legos) Markup defined graphic DOM-friendly Vector based Scales well Very efficient Ideal for interactive inline graphics (charts) Canvas (Etch-o-sketch) 2D drawing surface JavaScript API to draw Raster based 3D via WebGL (future) Ideal for larger-scale graphical applications (games)

12. Raphael JS JS API for drawing SVG Works cross-browser VML in IE Supports Animation

13. Wijmo – UI for the Web I make UI easy!

14. Wijmo – UI for the Web Builds on jQuery UI jQuery Grid HTML5 SVG Charts CSS3 Themes & Themeroller Extended for JavaScript (everywhere) WebForms MVC Wijmo is a robot…

15. $(“code”).show(); Finally

16. doSomething(); Get Wijmo: http://wijmo.com/ Rate me: http://spkr8.com/t/8686 Fork me: https://github.com/banzor

17. $(this).end(); Goodbye!