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/

Questions?

philogb@gmail.com

http://blog.thejit.org

http://github.com/philogb

http://thejit.org