Javascript visualisation frameworks

SVG via Raphäel, Canvas and others

Brendon McLean, Intellection Software@brendon9x

State of the Web 2-oh-no

The Tale of Two Rendering Modes

Immediate Mode:

function draw() {

context.fillStyle = "red";

context.fillRect(0, 0, 100, 20);

}

setInterval(draw, 1000 / 20);}

Examples: Almost everything.

The Tale of Two Rendering Modes

Retained mode:

<svgxmlns="http://www.w3.org/2000/svg" version="1.1"

width="640" height="480">

<path fill="none" stroke="#666666</path>

<circle cx="120" cy="390" r="8”></circle>

</svg>

Example: HTML – the DOM.

Immediate

• Fast

• Robust

• Limitless possibility

• Easy client side programming

• All the benefits of a DOM

• Much easier for events

• Exportable as document

• Mostly constructed in tools or on server side

Retained

Pros & Cons

Raphäel Javascript Library

• Simple JS API

• Affects the DOM

• Easy events

• Animation

• All browsers

by Dmitry Baranowskiy.

The unlikely hero: VML

“This is me doing my online banking in the year 2010”

“Yes, we wear jump suits…”

At a glance

• circle

• rect

• ellipse

• path

• text

• stroke

• fill

• opacity

• x, y, w, h

• rotation, scale, translation

• etc...

PropertiesPrimitives

Extra

• Events similar to DOM &all attributes can be animated

Bar chart demo

varrect = canvas.rect(bar.x(), bar.y() + bar.height(), bar.width(), 0);

rect.attr({

fill: "0-rgb(255,48,48)-rgb(255,74,74)-rgb(230,43,43)-rgb(255,48,48)", stroke: "none"

});

rect.animate({height: bar.height(), y: bar.y()}, 2000, "<>");

Beziers

Like logo

canvas.path([

"M", start.x, start.y, // Move to

"L", lineEnd.x, lineEnd.y, // Line to

"Q", control.x, control.y, end.x, end.y, // Quadratic bezier to

"Z"]);

Line chart

Events just like DOM

varslider = canvas.rect(s.x, s.y, s.width, s.height).attr({

fill: "white", "fill-opacity": 0.3, stroke: "white"

}).drag(function(dx, dy) {

sliderModel.x = this.startX + dx;

slider.attr({x: sliderModel.x});

update();

}, function() {

this.startX = slider.attr("x");

});

The gallery

vari = canvas.image(src, x, y, w, h);

i.translate(dx, dy);

i.animate({rotation: 45}, 1000, "<>");

i.scale(sx, sy);

Canvas (2D)

• Similar primitives to SVG

• Procedural

• Results in bitmaps

• Pixel access

• Context transforms

WebGL (Canvas 3D)

• Based on OpenGL ES (iOS, etc)

• Extremely low-level

• End user likely to use libraries (like THREE.js)

What’s it good for?

“...a solution looking for a problem.” - 1960

Future

Cool stuff

• Shaders – powerful like lasers

• WebCL future (512 core computation)

Not cool stuff

• Hardware support

• No IE support (Mozilla plugin coming)

Questions