HTML5 Canvas versus SVG for interactive charts and graphical models

Some links and notes:

• sitepoint: Canvas vs SVG: How to Choose the Right Format
• MSDN Blogs > IEBlog> Thoughts on when to use Canvas and SVG
• dev.opera.org: SVG or Canvas? Choosting between the two
• Graphic JavaScript Tree with Layout (implements layout algorithm from scratch)
• Sencha Touch Charts describing why they went with Canvas not SVG
• stackoverflow posts:
  • What is the difference between SVG and HTML5 Canvas?
  • HTML5 Canvas vs SVG vs div
  • Suggestions: Canvas or SVG?
  • Interactive directed graphs with SVG and Javascript
  • Why do we need the HTML5 Canvas element when the same can be achieved through SVG?
  • Library for Canvas / SVG web-based tree graphs with layout algorithm?
  • JavaScript charting library? - recommends SVG over Canvas; and Raphael
  • jQuery SVG vs. Raphael - vast majority of support is for Raphael

Toolkits and Frameworks

• JavaScript InfoVis Toolkit
• Paper.js - Vector Graphics Scripting based on Canvas
• Raphaël - based on SVG.  Links to tutorials in this SO thread.  Makes animation and interaction easy.  Good support.  MIT License.  Draggable graphical model is one of the examples.  Also see this SO poston using dynamic data with Raphael. Some libraries built on Raphaël:
  • gRaphaël - charting library (apparently no docs though)
  • Morris.js - timeseries library
  • Ico - an API to create complex charts; name-drops Edward Tufte. A fork = Grafico
  • Dracular - framework for displaying interactive graphical models.
• Really good comparison between Raphaël, Paper.js and Processing
• ExtJS: very, very powerful JavaScript framework for building web app UIs; with a good charting module
• Dojo (another powerful JavaScript web app framework) has http://livedocs.dojotoolkit.org/dojox/chartingdojox.charting

Tutorials and demos

• HTML5 graph slider using canvas and jQuery
• 2D function glotter using canvas (full screen; zoom and pan)
• HTML5 Canvas Graphic Solutions every web developer must know

Current conclusions

I should use Raphaël and one of its graphing add-ons.  I need to do more than just plot a standard line chart; I want lots of interaction.

Canvas is a lower level graphics API than SVG.  Canvas thinks in terms of individual pixels whilst SVG thinks in terms of vector objects.  Canvas is good for high performance 2D graphics like games; but SVG is good for applications which draw objects like boxes, lines etc.  My only slight concern about using SVG is that  I may run into performance issues if I want to build a full-screen waveform viewer.  Also,pre-Honeycomb Android doesn’t support SVG (but does support Canvas).  But I don’t care about pre-Honeycomb Android for my specific application.