Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

495 views

Published on

Slides from my talk at JSinSA

  • Be the first to comment

  • Be the first to like this

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 />

×