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

2. 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

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

4. Graph/Tree Layouts

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

6. Extensible
• Define custom Nodes and Edges
• Add Custom Animations (linear,
Elastic, etc.)

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

8. Web Standards Based

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

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

11. 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-squirrelfish-extreme/

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

13. Web Standards
HTML Document

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

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

16. Canvas
“A Scriptable Image Tag”

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

18. 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);

19. Canvas
Benefits Weak Points
Good Performance No notion of elements
Simple API Code gets too verbose

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

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

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

23. 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

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

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

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

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