d3.js visualization on android 2.3

Question

I know that the android browser for 2.3 does not support SVG, but I\'d like to know whether I could convert a d3.js SVG Visualization to a canvas using Canvg on clientside. Is t

Answer 1

Android does support Canvas, so that's certainly a good option (as far as SVG support goes, you are right that Android 2.3 is not compatible).

You can actually use canvas directly in d3; here is a comparison that Mike Bostock made showing the differences between using SVG and Canvas using a simple example:

Canvas Swarm / SVG Swarm

Keep in mind that you're not just limited to SVG or Canvas; for instance, www.nytimes.com/interactive has been seen using d3.js with HTML elements for visualizing (I'm suspecting for better cross-browser support).
See: http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html

Answer 2

Actually you CAN use Canvg to display d3's SVG as canvas on the client side. Following the code in here: http://jsfiddle.net/plaliberte/HAXyd/ you just feed the div with the generated SVG to the Canvg function. The only catch is that if you use ".style" in part of your d3 operations it will throw an error for some reason. For example:

.style("text-anchor","middle")

In Android 2.x it throws:

TypeError: Result of expression 'this.style' [null] is not an object

Therefore you will need to modify these methods to use .attr("style" instead:

.attr("style", "text-anchor:middle")

There are also functions inside d3 that use the style method like axis, so you may also need to make this substitution inside the library.