newbie questions re: SVG vs HTML5 Canvas

[Scott Alexander]

Hi -

I really like d3 and I've got some of the simple tutorials running
locally:

https://github.com/mbostock/d3/wiki/Faq
http://www.ivanteoh.com/blog/2011/07/d3-tutorial-scale-graph/

The examples here:

https://github.com/mbostock/d3/wiki

show that d3 is very simple, powerful and extensible, so it could end
up getting used in lots of interesting applications.


I'm interested in using d3 (along with node.js) for interactive
visualization of large datasets, including zooming, panning/scrolling
and filtering data using the mouse. I'm curious whether I need to be
concerned about SVG versus HTML5 Canvas.

(1) Can d3 use either one for rendering? Is there a setting or
configuration somewhere to choose one or the other?

(1) Is one better than the other for visualizing and navigating large
datasets interactively?

(3) Are there any additional tools people recommend to support
"fallback" or "graceful degradation" if the browser doesn't support
SVG or HTML5? (For example, the JavaScript data visualization library
provided by zingchart.com appears to be able to "fall back" to Flash
if the browser doesn't support SVG or HTML5 Canvas.)

I did a search for 'svg html5' here in this group and I found some
discussions but I'm not sure what it all means:

http://groups.google.com/group/d3-js/browse_frm/thread/730cf739ddcb3cf/db392fa840c2fde7?hl=en&lnk=gst&q=svg+canvas#db392fa840c2fde7

http://groups.google.com/group/d3-js/browse_frm/thread/17627896a9c159bd/de2cc0f0ab186d69?hl=en&lnk=gst&q=svg+canvas#de2cc0f0ab186d69

https://groups.google.com/forum/#!topic/d3-js/KjGW94SyrAg/discussion

HTML5 Canvas sounds like it might be nice for efficient interactive
real-time data analysis, because I heard some people are using node.js
with web sockets to "push" real-time data updates. But I understand
HTML5 Canvas is bitmap-based (like Photoshop), whereas SVG is vector-
based (like Adobe Illustrator) - and I generally like vector-based
better than pixel-based, so I'm more interested in using SVG in d3, if
that makes sense for visualizing and navigating large datasets.

Maybe I'd just use HTML5 Canvas in situations involving Google Maps,
which I understand are bitmaps. If this makes sense, I still don't see
how d3 decides whether to use SVG or HTML5 Canvas for rendering.


Here's some examples using other JavaScript data visualization
libraries showing "zooming, panning/scrolling and filtering data
interactively using the mouse":

dragging the mouse horizontally to select a subdomain:
http://dygraphs.com/

dragging the mouse horizontally in a separate "mini" graph to select a
subdomain:
http://www.highcharts.com/demo/dynamic-master-detail

dragging the mouse diagonally to select a subdomain and a subrange:
http://www.zingchart.com/learn/area/#3-8-51

clicking the legend to select / deselect a data series:
http://www.zingchart.com/learn/area/#3-4-17


It looks like all these effects should be straightforward to implement
using d3, as I'm already seeing an example of a similar sort of
zooming (using the mouse wheel) here:

http://bl.ocks.org/1100394


Thanks for any advice on using SVG versus HTML5 Canvas with d3 for
interactive navigation of large datasets.

[Scott Alexander]

OK, I found an example on bl.ocks.org that uses HTML5 Canvas - but it
doesn't seem to use D3 at all:

Canvas Experiment: Sierpinski Triangles
http://bl.ocks.org/992189

So maybe D3 has nothing to do with HTML5 after all.

What got me a bit confused was this part of the documentation:

"Rather than provide a monolithic system with all the features anyone
may ever need, D3 solves only the crux of the problem: efficient
manipulation of documents based on data. This gives D3 extraordinary
flexibility, exposing the full capabilities of underlying technologies
such as CSS3, HTML5 and SVG. It avoids learning a new intermediate
proprietary representation."
http://mbostock.github.com/d3/

This just seems to mean that since D3 doesn't define a 'monolithic
system', there's nothing stopping you from dropping down and directly
accessing HTML5.

[Mike Bostock]

D3 doesn't hide the underlying representation; so it's you who decides
whether you are using SVG, HTML, Canvas, etc. For example, if you
append an svg:svg element, you're using SVG! There's no configuration
to magically convert SVG to Canvas under the hood; you're just
manipulating document elements the same way you'd author HTML in a
text editor, but with all of D3's data-driven transformations.

D3 can only manipulate documents, using the W3C DOM API. So you can
create and destroy and reorder elements, but it won't help you draw
onto a Canvas since there's a separate API for that. (You can create
the Canvas element using D3, but that's not particularly helpful.) The
HTML5 Canvas does not have a backing document (a.k.a. scenegraph). It
uses immediate mode rendering:

http://en.wikipedia.org/wiki/Immediate_mode

Ultimately whether pixel (immediate) or vector (retained) graphics is
better depends on the application. I prefer SVG for most things, but
Canvas is great if you want a heatmap or some other plot of continuous
data that would be overly expensive to represent in vector. More
discussion here:

http://groups.google.com/group/d3-js/browse_frm/thread/2a3196f784b2ac08/f0b0a21c0fabce95

Mike

[Scott Alexander]

Great clarification - thanks!

> http://groups.google.com/group/d3-js/browse_frm/thread/2a3196f784b2ac...
>
> Mike

[Vincenzo Menanno]

I would like to know if there are some good places to read up on a comparison of SVG vs Canvas.

I think at an even higher level if possible.

Why would one use Canvas as opposed to SVG.

So far the only reasoning I have heard is the amount of data that the system would have to draw.

That would be really helpful.

Thanks

Vincenzo