using web standards to create interactive data visualizations for the web
DESCRIPTION
Information Visualization talk about the JavaScript InfoVis Toolkit and Web Standards. December 2009TRANSCRIPT
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/