Using Web Standards to create Interactive Data Visualizations for the Web

Using Web Standards to create Interactive Data Visualizations for the Web Nicolas Garcia Belmonte - Dec. 2009

Agenda • JavaScript InfoVis Toolkit Overview • Web Standards, JavaScript and Graphics • What’s next for the JIT (v. 1.2) • What’s next for Web Standards (WebGL) • Introducing V8-GL

JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Multiple Graph/Tree Layouts • Modular, Extensible, Composable • Web Standards Based

Graph/Tree Layouts

Modular Grab only what you need HyperTree SunBurst TreeMap JavaScript InfoVis ForceDirected Toolkit RGraph Icicle SpaceTree

Extensible • Deﬁne custom Nodes and Edges • Add Custom Animations (linear, Elastic, etc.)

Composable Add Visualizations as Node/Edge rendering functions to other visualizations

Web Standards Based

Web Standards JavaScript • Dynamic, Expressive, Powerful • Support in all Browsers • Large Community

Web Standards JavaScript: Language Features • Dynamic • Weakly typed • Differential Inheritance • First-class Functions • Object Mutability • Booleans as Defaults • etc.

Web Standards JavaScript: 100% Faster SunSpider runs per minute 65.00 48.75 32.50 16.25 0 WebKit 3.0 WebKit 3.1 SquirrelFish SquirrelFish X Source: http://webkit.org/blog/214/introducing-squirrelﬁsh-extreme/

Web Standards Everybody wants to make JavaScript Faster • Apple Safari - SquirrelFish Extreme • Mozilla Firefox - TraceMonkey • Google Chrome - V8 • Opera - Carakan

Web Standards HTML Document

Web Standards HTML5 Header • Audio Nav • Video Form • Drag n Drop Section • Canvas Image • Storage Footer • etc.

Web Standards CSS3 Header • Gradients Nav • Text Effects Section Form • Transforms Image • Animations • etc. Footer

Canvas “A Scriptable Image Tag”

Canvas Initialization <canvas id=”tutorial” width=500 height=500></canvas> var canvas = document.getElementById(“tutorial”); var ctx = canvas.getContext(“2d”);

Canvas Drawing Shapes ctx.fillStyle = “rgb(200, 0, 0)”; ctx.fillRect(10, 10, 55, 50); ctx.fillStyle = “rgba(0, 0, 200, 0.5)”; ctx.fillRect(30, 30, 55, 50);

Canvas Beneﬁts Weak Points Good Performance No notion of elements Simple API Code gets too verbose

Why JS + Canvas? • Native Browser Technologies • Seamless Integration • High Interoperability • No third-party libraries • Access to a large community

JavaScript InfoVis Toolkit Applications Visualizing Linux Package Dependencies Source: http://demos.thejit.org/example/rgraph/example1/

JavaScript InfoVis Toolkit Applications Visualizing Artist-Band Relationships Source: http://demos.thejit.org/example/hypertree/example1/

JavaScript InfoVis Toolkit Applications Some (public) user Applications CRS Management UI ROOT project at CERN Project at Macalester College Game Stats at Dystopia Neural Network Visualization

What’s next for the JIT? Version 1.2 • SunBurst, Icicle and Force-Directed Visualizations • Mouse Controlled Transforms • And more...

What’s next for the Web? WebGL Already available in WebKit and Firefox nightlies (*)

V8-GL Write Hardware Accelerated Desktop Graphics with JS http://github.com/philogb/v8-gl/

Questions? philogb@gmail.com http://blog.thejit.org http://github.com/philogb http://thejit.org

http://blog.thejit.org	706
http://blog.dreamcss.com	53
http://www.slideshare.net	22
http://sara-cannon.com	21
http://hi.chibaole.com	12
http://static.slidesharecdn.com	11
http://juzuba.blogspot.com	6
http://fairchildbooks.com	5
http://www.sara-cannon.com	3
http://patriciojavier1220.blogspot.com	2
http://learning101.posterous.com	2
http://indoclass.com	2
http://translate.googleusercontent.com	2
http://www.lmodules.com	1
http://stevekinney.posterous.com	1
http://www.hanrss.com	1
http://www.indoclass.com	1

Using Web Standards to create Interactive Data Visualizations for the Web

by philogb on Dec 07, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

17 Embeds 851

Statistics

Using Web Standards to create Interactive Data Visualizations for the Web — Presentation Transcript