Embed Size (px)
DESCRIPTION
Citation preview
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
ModularGrab only what you need
HyperTree
TreeMap
RGraph
SpaceTree
JavaScript InfoVis Toolkit
SunBurst
ForceDirected
Icicle
Extensible
• Define custom Nodes and Edges
• Add Custom Animations (linear, Elastic, etc.)
ComposableAdd Visualizations as Node/Edge rendering
functions to other visualizations
Web Standards Based
Web StandardsJavaScript
• Dynamic, Expressive, Powerful
• Support in all Browsers
• Large Community
Web StandardsJavaScript: Language Features
• Dynamic
• Weakly typed
• Differential Inheritance
• First-class Functions
• Object Mutability
• Booleans as Defaults
• etc.
Web StandardsJavaScript: 100% Faster
0
16.25
32.50
48.75
65.00
WebKit 3.0 WebKit 3.1 SquirrelFish SquirrelFish XSource: http://webkit.org/blog/214/introducing-squirrelfish-extreme/
SunS
pide
r ru
ns p
er m
inut
e
Web StandardsEverybody wants to make JavaScript Faster
• Apple Safari - SquirrelFish Extreme
• Mozilla Firefox - TraceMonkey
• Google Chrome - V8
• Opera - Carakan
Web Standards
HTML Document
Web StandardsHTML5
Header
SectionForm
Image
Nav
Footer
• Audio
• Video
• Drag n Drop
• Canvas
• Storage
• etc.
Web StandardsCSS3
Header
SectionForm
Image
Nav
Footer
• Gradients
• Text Effects
• Transforms
• Animations
• etc.
Canvas“A Scriptable Image Tag”
Canvas
<canvas id=”tutorial” width=500 height=500></canvas>
var canvas = document.getElementById(“tutorial”);var ctx = canvas.getContext(“2d”);
Initialization
CanvasDrawing 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
Benefits Weak Points
Good PerformanceSimple API
No notion of elementsCode 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
ROOT project at CERN
Project at Macalester CollegeGame Stats at Dystopia
Neural Network Visualization
CRS Management UI
What’s next for the JIT?
• SunBurst, Icicle and Force-Directed Visualizations
• Mouse Controlled Transforms
• And more...
Version 1.2
What’s next for the Web?
WebGL
Already available in WebKit and Firefox nightlies (*)
V8-GLWrite Hardware Accelerated Desktop Graphics with JS
http://github.com/philogb/v8-gl/
