![Page 1: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/1.jpg)
Using Web Standards to create Interactive Data Visualizations for the
Web
Nicolas Garcia Belmonte - Dec. 2009
![Page 2: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/2.jpg)
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
![Page 3: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/3.jpg)
JavaScript InfoVis Toolkit
• Web Based Interactive Data Visualizations
• Multiple Graph/Tree Layouts
• Modular, Extensible, Composable
• Web Standards Based
![Page 4: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/4.jpg)
Graph/Tree Layouts
![Page 5: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/5.jpg)
ModularGrab only what you need
HyperTree
TreeMap
RGraph
SpaceTree
JavaScript InfoVis Toolkit
SunBurst
ForceDirected
Icicle
![Page 6: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/6.jpg)
Extensible
• Define custom Nodes and Edges
• Add Custom Animations (linear, Elastic, etc.)
![Page 7: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/7.jpg)
ComposableAdd Visualizations as Node/Edge rendering
functions to other visualizations
![Page 8: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/8.jpg)
Web Standards Based
![Page 9: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/9.jpg)
Web StandardsJavaScript
• Dynamic, Expressive, Powerful
• Support in all Browsers
• Large Community
![Page 10: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/10.jpg)
Web StandardsJavaScript: Language Features
• Dynamic
• Weakly typed
• Differential Inheritance
• First-class Functions
• Object Mutability
• Booleans as Defaults
• etc.
![Page 11: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/11.jpg)
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
![Page 12: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/12.jpg)
Web StandardsEverybody wants to make JavaScript Faster
• Apple Safari - SquirrelFish Extreme
• Mozilla Firefox - TraceMonkey
• Google Chrome - V8
• Opera - Carakan
![Page 13: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/13.jpg)
Web Standards
HTML Document
![Page 14: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/14.jpg)
Web StandardsHTML5
Header
SectionForm
Image
Nav
Footer
• Audio
• Video
• Drag n Drop
• Canvas
• Storage
• etc.
![Page 15: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/15.jpg)
Web StandardsCSS3
Header
SectionForm
Image
Nav
Footer
• Gradients
• Text Effects
• Transforms
• Animations
• etc.
![Page 16: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/16.jpg)
Canvas“A Scriptable Image Tag”
![Page 17: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/17.jpg)
Canvas
<canvas id=”tutorial” width=500 height=500></canvas>
var canvas = document.getElementById(“tutorial”);var ctx = canvas.getContext(“2d”);
Initialization
![Page 18: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/18.jpg)
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);
![Page 19: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/19.jpg)
Canvas
Benefits Weak Points
Good PerformanceSimple API
No notion of elementsCode gets too verbose
![Page 20: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/20.jpg)
Why JS + Canvas?
• Native Browser Technologies
• Seamless Integration
• High Interoperability
• No third-party libraries
• Access to a large community
![Page 21: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/21.jpg)
JavaScript InfoVis Toolkit Applications
Visualizing Linux Package Dependencies
Source: http://demos.thejit.org/example/rgraph/example1/
![Page 22: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/22.jpg)
JavaScript InfoVis Toolkit Applications
Visualizing Artist-Band Relationships
Source: http://demos.thejit.org/example/hypertree/example1/
![Page 23: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/23.jpg)
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
![Page 24: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/24.jpg)
What’s next for the JIT?
• SunBurst, Icicle and Force-Directed Visualizations
• Mouse Controlled Transforms
• And more...
Version 1.2
![Page 25: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/25.jpg)
What’s next for the Web?
WebGL
Already available in WebKit and Firefox nightlies (*)
![Page 26: Using Web Standards to create Interactive Data Visualizations for the Web](https://reader034.vdocuments.site/reader034/viewer/2022052618/554f92fab4c905435d8b519f/html5/thumbnails/26.jpg)
V8-GLWrite Hardware Accelerated Desktop Graphics with JS
http://github.com/philogb/v8-gl/