Data Visualization in HTML5 with jQuery & Wijmo
17
Data Visualization in HTML5 Chris Bannon
-
Upload
chris-bannon -
Category
Technology
-
view
115 -
download
3
description
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.
Transcript of Data Visualization in HTML5 with jQuery & Wijmo
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!
