Data Visualization With Web Standards

You can do that?

Data Visualization

A visual representation of data and information

Why's this guy from Adobe talking about web standards?

Retrospective

Flash used to be the only real way to have interactive data on the web

Google Finance

Times have changed

Not all mobile devices support Flash

HTML5 Capabilities have grown

Adobe Loves HTML

http://html.adobe.com/

Adobe Loves HTML & Mobile Apps



http://phonegap.com/

Adobe Loves Web Standards

http://blogs.adobe.com/webplatform/

OK, so how do you actually go about visualizing data?

<IMG>

<img src="myImage.png" />
  • Not Interactive
  • Requires Server Round Trip
  • No "WOW"

Example: Google Image Charts

<Canvas>

<canvas/>
  • Client Side Rendering
  • Programmatic Drawing API
  • Very Dynamic
  • Can work in offline scenarios

Example: RGraph

SVG

Scalable Vector Graphics

Browser market share, April, 2011MSIEFirefoxChromeSafariMSIE 6.0: 10.85%MSIE 7.0: 7.35%MSIE 8.0: 33.06%MSIE 9.0: 2.81%Firefox 3.5: 1.58%Firefox 3.6: 13.12%Firefox 4.0: 5.43%Chrome 10.0: 9.91%Safari 5.0: 4.55%Safari 4.0: 1.42%Opera 11.x: 1.65%Highcharts.com
  • Client OR Server Side Rendering
  • Static or Dynamic
  • Interactive via HTML DOM
  • Declarative or Programmatic

Examples: Highcharts, Sencha Touch Charts, Kendo UI Charts, Google Charts, D3 g.Raphael

HTML DOM

(W/ Creative Usage)

WebGL

(not a standard yet)

Andrew Trice

Technical Evangelist
Adobe Systems