Javascript visualisation frameworks<br />www.JSinSA.com<br />JS in SA Conference 2011<br />SVG via Raphäel, Canvas and oth...
State of the Web 2-oh-no<br />www.JSinSA.com<br />JS in SA Conference 2011<br />
The Tale of Two Rendering Modes<br />www.JSinSA.com<br />JS in SA Conference 2011<br />Immediate Mode:<br />function draw(...
The Tale of Two Rendering Modes<br />www.JSinSA.com<br />JS in SA Conference 2011<br />Retained mode:<br /><svgxmlns="http...
www.JSinSA.com<br />JS in SA Conference 2011<br />Pros & Cons<br />Retained<br />Immediate<br />Fast<br />Robust<br />Limi...
Much easier for events
Exportable as document
Mostly constructed in tools or on server side</li></li></ul><li>Raphäel Javascript Library<br />www.JSinSA.com<br />JS in ...
The unlikely hero: VML<br />www.JSinSA.com<br />JS in SA Conference 2011<br />“This is me doing my online banking in the y...
At a glance<br />www.JSinSA.com<br />JS in SA Conference 2011<br />Properties<br />Primitives<br />circle<br />rect<br />e...
fill
opacity
x, y, w, h
rotation, scale, translation
etc...</li></ul>Extra<br /><ul><li>Events similar to DOM & all attributes can be animated</li></li></ul><li>Bar chart demo...
Beziers<br />www.JSinSA.com<br />JS in SA Conference 2011<br />Like logo<br />canvas.path([ <br />	"M", start.x, start.y, ...
Line chart<br />www.JSinSA.com<br />JS in SA Conference 2011<br />Events just like DOM<br />varslider = canvas.rect(s.x, s...
Upcoming SlideShare
Loading in …5
×

JSinSA - JS Visualisation APIs

421 views
389 views

Published on

Slides from my talk at JSinSA

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
421
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Cape Town?
  • Note much that spans everythingFuture looking better
  • JSinSA - JS Visualisation APIs

    1. 1. Javascript visualisation frameworks<br />www.JSinSA.com<br />JS in SA Conference 2011<br />SVG via Raphäel, Canvas and others<br />Brendon McLean, Intellection Software<br />@brendon9x<br />
    2. 2. State of the Web 2-oh-no<br />www.JSinSA.com<br />JS in SA Conference 2011<br />
    3. 3. The Tale of Two Rendering Modes<br />www.JSinSA.com<br />JS in SA Conference 2011<br />Immediate Mode:<br />function draw() { <br /> context.fillStyle = "red"; <br /> context.fillRect(0, 0, 100, 20); <br /> } <br /> setInterval(draw, 1000 / 20);<br />}<br />Examples: Almost everything.<br />
    4. 4. The Tale of Two Rendering Modes<br />www.JSinSA.com<br />JS in SA Conference 2011<br />Retained mode:<br /><svgxmlns="http://www.w3.org/2000/svg" version="1.1" width="640" height="480"> <br /> <path fill="none" stroke="#666666</path> <br /> <circle cx="120" cy="390" r="8”></circle><br /></svg><br />Example: HTML – the DOM.<br />
    5. 5. www.JSinSA.com<br />JS in SA Conference 2011<br />Pros & Cons<br />Retained<br />Immediate<br />Fast<br />Robust<br />Limitless possibility<br />Easy client side programming<br /><ul><li>All the benefits of a DOM
    6. 6. Much easier for events
    7. 7. Exportable as document
    8. 8. Mostly constructed in tools or on server side</li></li></ul><li>Raphäel Javascript Library<br />www.JSinSA.com<br />JS in SA Conference 2011<br />Simple JS API<br />Affects the DOM<br />Easy events<br />Animation<br />All browsers<br />by Dmitry Baranowskiy. <br />
    9. 9. The unlikely hero: VML<br />www.JSinSA.com<br />JS in SA Conference 2011<br />“This is me doing my online banking in the year 2010”<br />“Yes, we wear jump suits…”<br />
    10. 10. At a glance<br />www.JSinSA.com<br />JS in SA Conference 2011<br />Properties<br />Primitives<br />circle<br />rect<br />ellipse<br />path<br />text<br /><ul><li>stroke
    11. 11. fill
    12. 12. opacity
    13. 13. x, y, w, h
    14. 14. rotation, scale, translation
    15. 15. etc...</li></ul>Extra<br /><ul><li>Events similar to DOM & all attributes can be animated</li></li></ul><li>Bar chart demo<br />www.JSinSA.com<br />JS in SA Conference 2011<br />varrect = canvas.rect(bar.x(), bar.y() + bar.height(), bar.width(), 0); <br />rect.attr({ <br /> fill: "0-rgb(255,48,48)-rgb(255,74,74)-rgb(230,43,43)-rgb(255,48,48)", stroke: "none"<br />}); <br />rect.animate({height: bar.height(), y: bar.y()}, 2000, "<>");<br />
    16. 16. Beziers<br />www.JSinSA.com<br />JS in SA Conference 2011<br />Like logo<br />canvas.path([ <br /> "M", start.x, start.y, // Move to <br /> "L", lineEnd.x, lineEnd.y, // Line to<br /> "Q", control.x, control.y, end.x, end.y, // Quadratic bezier to<br /> "Z"]);<br />
    17. 17. Line chart<br />www.JSinSA.com<br />JS in SA Conference 2011<br />Events just like DOM<br />varslider = canvas.rect(s.x, s.y, s.width, s.height).attr({ <br /> fill: "white", "fill-opacity": 0.3, stroke: "white"<br /> }).drag(function(dx, dy) { <br />sliderModel.x = this.startX + dx; <br />slider.attr({x: sliderModel.x}); <br /> update(); <br /> }, function() { <br />this.startX = slider.attr("x"); <br /> });<br />
    18. 18. The gallery<br />www.JSinSA.com<br />JS in SA Conference 2011<br />vari = canvas.image(src, x, y, w, h); <br />i.translate(dx, dy); <br />i.animate({rotation: 45}, 1000, "<>"); <br />i.scale(sx, sy);<br />
    19. 19. Canvas (2D)<br />Similar primitives to SVG<br />Procedural<br />Results in bitmaps<br />Pixel access<br />Context transforms<br />www.JSinSA.com<br />JS in SA Conference 2011<br />
    20. 20. WebGL (Canvas 3D)<br />Based on OpenGL ES (iOS, etc)<br />Extremely low-level<br />End user likely to use libraries (like THREE.js)<br />www.JSinSA.com<br />JS in SA Conference 2011<br />
    21. 21. What’s it good for?<br />www.JSinSA.com<br />JS in SA Conference 2011<br />“...a solution looking for a problem.” - 1960<br />
    22. 22. Future<br />Cool stuff<br />Shaders – powerful like lasers<br />WebCL future (512 core computation)<br />Not cool stuff<br />Hardware support<br />No IE support (Mozilla plugin coming)<br />www.JSinSA.com<br />JS in SA Conference 2011<br />
    23. 23. www.JSinSA.com<br />JS in SA Conference 2011<br />Questions<br />

    ×