Data Visualization in HTML5 with jQuery & Wijmo

22,473 views
22,553 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 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.

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
22,473
On SlideShare
0
From Embeds
0
Number of Embeds
15,814
Actions
Shares
0
Downloads
65
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • What is Data Viz?Why Visualize?Patterns and CorrelationsSummarizeUnderstandingHow to VisualizeChartsGaugesMapsTechnology used for Data VisFlashHTML5 OptionsCanvasSVGDiff?Danger Zone!Pie ChartsChange origin of axisOmissionMisleading relationshipsDemos
  • Data Visualization in HTML5 with jQuery & Wijmo

    1. 1. Data Visualization in HTML5<br />Chris Bannon<br />
    2. 2. about:me<br />Chris Bannon<br />Product Manager<br />http://banzor.us<br />@b4nn0n<br />“Banzor”<br />
    3. 3. Data visualization is the study of the visual representation of data.<br />I prefer binary<br />
    4. 4. Why Visualize?<br />Find Patterns and Correlations<br />Summarize Large Data Sets<br />Understanding Information<br />Because you are human…<br />
    5. 5. How Do We Visualize Data?<br />Charts<br />Gauges<br />Maps<br />Sizes/Colors<br />
    6. 6. Don’t Thimk So Hard<br />See trends instantly<br />Make quick decisions<br />Comprehend millions of data points<br />Stop guessing<br />Who doesn’t love stats?<br />
    7. 7. Visualization Can Save Lives<br />http://www.motherboard.tv/2011/1/28/was-space-shuttle-challenger-a-casualty-of-bad-data-visualization<br />
    8. 8. …Beware of Evil Visualizations!<br />Pie charts suck*<br />Change origin of axis<br />Data Omission<br />Misleading relationships<br />I’m looking at you Politicians and Media!<br />
    9. 9. Yesterday’s News<br />
    10. 10. Today’s Technology<br />1337!<br />
    11. 11. HTML5 Graphics<br />SVG (Legos)<br />Markup defined graphic<br />DOM-friendly<br />Vector based<br />Scales well<br />Very efficient<br />Ideal for interactive inline graphics (charts)<br />Canvas (Etch-o-sketch)<br />2D drawing surface<br />JavaScript API to draw<br />Raster based<br />3D via WebGL (future)<br />Ideal for larger-scale graphical applications (games)<br />
    12. 12. Raphael JS<br />JS API for drawing SVG<br />Works cross-browser<br />VML in IE<br />Supports Animation<br />
    13. 13. Wijmo – UI for the Web<br />I make UI easy!<br />
    14. 14. Wijmo – UI for the Web<br />Builds on jQuery UI<br />jQuery Grid<br />HTML5 SVG Charts<br />CSS3 Themes & Themeroller<br />Extended for<br />JavaScript (everywhere)<br />WebForms<br />MVC<br />Wijmo is a robot…<br />
    15. 15. $(“code”).show();<br />Finally<br />
    16. 16. doSomething();<br />Get Wijmo: http://wijmo.com/<br />Rate me: http://spkr8.com/t/8686<br />Fork me: https://github.com/banzor<br />
    17. 17. $(this).end();<br />Goodbye!<br />

    ×