data visualization in html5 with jquery & wijmo

Data Visualization in HTML5Chris Bannon

about:me

Chris BannonProduct Managerhttp://banzor.us @b4nn0n

“Banzor”

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!