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.