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
Top Related