Data Visualization in HTML5Chris Bannon
Data visualization is the study of the visual representation of data.
I prefer binary
Why Visualize?
• Find Patterns and Correlations• Summarize Large Data Sets• Understanding Information
Because you are human…
How Do We Visualize Data?
• Charts• Gauges• Maps• Sizes/Colors
Don’t Thimk So Hard
• See trends instantly• Make quick
decisions• Comprehend
millions of data points
• Stop guessing• Who doesn’t love
stats?
Visualization Can Save Lives
http://www.motherboard.tv/2011/1/28/was-space-shuttle-challenger-a-casualty-of-bad-data-visualization
…Beware of Evil Visualizations!• Pie charts suck*• Change origin of axis• Data Omission• Misleading relationships
I’m looking at you Politicians and Media!
Yesterday’s News
Today’s Technology
1337!
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)
Raphael JS
• JS API for drawing SVG• Works cross-browser– VML in IE
• Supports Animation
Wijmo – UI for the Web
I make UI easy!
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…
$(“code”).show();
Finally
doSomething();
Get Wijmo: http://wijmo.com/ Rate me: http://spkr8.com/t/8686Fork me: https://github.com/banzor
$(this).end();
Goodbye!
