Data Visualization with Web Standards

ubiquitousstrumpetMobile - Wireless

Dec 10, 2013 (3 years and 7 months ago)

74 views

© 2012 Adobe Systems Incorporated. All Rights Reserved.
Data Visualization with Web Standards
You can do that?
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Who is this guy?
Andrew Trice
Technical Evangelist, Adobe

atrice@adobe.com


h!p://tricedesigns.com


@
andytrice


h!p://github.com/triceam




All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Data Visualization
All external content obtained via creative commons or public domain.
Data Visualization:
a visual representation of data & information
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Retrospective
All external content obtained via creative commons or public domain.
Flash was the only option for
Interactive graphics on the web.

EG: Google Finance
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Retrospective – Flex
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Today
All external content obtained via creative commons or public domain.
HTML, JS, CSS & associated technologies
have matured dramatically
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Today
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Today
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Today
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Methods
§

<
img
>
§

Canvas
§

Vector/SVG
§

DOM
§

WebGL

All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Methods - <
img
>
§

<
img

src
=“
myChart.jpg
”>
§

Not interactive
§

Requires round-trip to server
§

Not much “wow”
§

h!ps://developers.google.com/chart/image/

All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Methods - Canvas
§

Client-side rendering
§

Drawing API
§

Very dynamic
§

h!p://
www.rgraph.net
/
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Methods - SVG
§

Server or Client Side Rendering
§

Static or Dynamic
§

Interactive as part of HTML DOM
§

Highcharts
,
Sencha
Touch Charts
§

Kendo UI Charts, Google Charts
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Methods - DOM
Use HTML DOM
elements to visually
represent data
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Methods -
WebGL

Not a standard yet,
but looks promising
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
HTML/JS Visualization Frameworks
(just a few, certainly not all)
All external content obtained via creative commons or public domain.
www.amcharts.com

http://
www.kendoui.com
/
dataviz.aspx

http://www.highcharts.com/

http://www.rgraph.net/

http://raphaeljs.com/

http://
www.sencha.com
/products/touch/charts
http://mbostock.github.com/d3/