Develop Reference

IE 11 error for d3 gauge dialler [duplicate]

Could a developer with experience of D3.JS indicate what specific browsers and browser version levels in practice most readily support the D3.JS library ?
Is there a list of D3.JS 'components' which are known not to be compatible with specific browsers and browser version levels?
The D3.JS website suggests :
Browser Support
D3 supports so-called “modern” browsers, which generally means everything except IE8 and below. D3 is tested against Firefox, Chrome (Chromium), Safari (WebKit), Opera and IE9. Parts of D3 may work in older browsers, as the core D3 library has minimal requirements: JavaScript and the W3C DOM API. For IE8, the compatibility library Aight is recommended. D3 uses the Selectors API Level 1, but you can preload Sizzle for compatibility. You'll need a modern browser to use SVG and CSS3 Transitions. D3 is not a compatibility layer, so if your browser doesn't support standards, you're out of luck. Sorry!"
However, I was hoping for a more specific answer.

I'm going to go out on a limb here and equate SVG support with D3 support, since (in my opinion) that's the most useful part of the library.
With that in mind, this link should give you the exact browser versions that support it:
http://caniuse.com/svg
And this matches what you pasted from the D3 site: basically every major browser vendor except IE has had SVG support for many many versions.
Your question says "in practice" and that means SVG. Yes, I know there are some samples of using D3 with the non-SVG parts of the DOM, but the vast majority of the examples in the gallery are SVG-based.

D3 is a library for data manipulations with a lot of helper tools for data visualizations using SVG and Canvas.
D3 is designed to give you direct access to all underlying features of HTML and SVG. This means, cross-browser compatibility is limited by the elements and attributes your code uses rather than D3 itself.
Here are some examples for HTML5 and CSS3:
// Requires HTML5
d3.select('body').append('nav');
// Requires CSS3 transformations
d3.select('div').style('transform', 'matrix(1, -0.3, 0, 1, 0, 0)');
and one for SVG and SMIL:
// Requires SMIL
d3.select('rect').append('animate')
.attr('attributeName', 'x')
.attr('from', 10)
.attr('to', 50);
and one for Canvas:
// Requires Canvas
d3.select('body').append('canvas');
If we consider only the D3 framework itself (for example to use only the geo projection functions, but no DOM elements etc.), cross-browser compatibility is limited by the browser support of ECMAScript 5 due to the heavy use of map, forEach, etc.

raphael.js vs paper.js

What are the main differences between raphael.js and paper.js?
Are there any other libs out there I should look at? Any like these that focus more on CSS3 then SVG?
Thanks!

Raphael uses SVG. Paper use Canvas.
That's the major difference.
In terms of what you can do with them, Canvas and SVG each have their own place, and are good for different things (although they are both capable of doing each other's thing as well if you ask them to). From a purely functional point of view, you need to consider what you want to do with the library before you decide which one you go with.
Browser compatibility is going to be a big issue, whichever one you use. This will possibly be a bigger issue than functionality, in fact.
Raphael has an advantage on the desktop because it detects older versions of IE (as far back as IE6) and falls back to using VML instead of SVG. This means it has excellent compatibility on virtualyl all desktop browsers. Canvas simply isn't supported on older IEs, and the Paper.js people don't really seem too worried about it.
But on mobiles, Paper.js may be better, because Canvas has much better support on mobiles than SVG. SVG isn't supported on most Android devices at all. This is changing: Android 3.0 introduced SVG support, but most Android devices being sold even now come with v2.x, so it'll be a while before you can rely on SVG working on a mobile.
For more info about browser support, see the CanIUse site:
CanIUse SVG
CanIUse Canvas
Hope that helps.

The most obvious difference is that Raphael targets SVG, and Paper targets the Canvas element. It also appears that Paper has far greater advanced features, whereas Raphael is just core SVG elements, which can then be expanded upon with plugins. Arguably, it depends more on your need, and which environments you wish to target. Canvas works well on some mobile browsers, SVG barely works on mobile environments at all.
As another side note: SVG, as I'm aware of it, is not hardware-accelerated in IE (9) or Firefox, and, again if my memory isn't failing me, Canvas is, at least in IE (9). As for IE 8 and below, you need a browser plugin, which most have, but it is a dependency to expect.

Are there any other libs out there I should look at?
Yes, you should have a look at processing.js!
And by the way - here is an excellent comparison between raphael.js, paper.js and processing.js:
http://coding.smashingmagazine.com/2012/02/22/web-drawing-throwdown-paper-processing-raphael/
And even code comparison of the same effect:
http://zgrossbart.github.com/3gears/

Are there any other libs out there I should look at?
If you have experience in Flash development you might consider easel.js which provides you with some of the flash display mechanisms. Easel looks like a really nice lib to me.
Another interesting library is processingjs, unlike the other libs processingjs also does 3d stuff. (It's also good at 2d.) Unlike paper, raphael and easel processing doesn't handle user interaction out of the box.
Both libraries use canvas.

Can we use canvas.toDataURL on IE7 and IE8?

I am using toDataURL() method of a canvas object. It works on IE9 and Chrome.
But it is not supporting for IE7 and IE8. I found this link
https://github.com/sampula/SVG.toDataURL/commit/9b59af148b7f14d41974cf318eed6f84c8c91062
It extends SVG to use toDataURL(). But in its implementation, it again uses canvas.toDataURL(). I am using Google's API (jquery.flot.js) for plotting all the graphs graphs. But it also uses canvas to plot the graph. So, SVG is not an option.
I there ever a way to use canvas.toDataURL() or something similar for IE7 and IE8.
Thanks in advance

IE7/8 does not support either Canvas or SVG.
It does however support VML, which is a vector language similar to SVG, and there are a number of javascript-based hacks for IE that use its VML functionality to emulate both Canvas and SVG in this older browser.
The most well known IE-Canvas hack is this one: http://code.google.com/p/explorercanvas/
I haven't spent much time with it myself, so I can't vouch for whether it can do specific functionality such as the toDataURL() method you're asking about, but if you can't do it with this, then it's unlikely to be possible at all.
I mentioned that there are similar tools for VML->SVG as well. If that's of interest to you, then you might want to look into this one: http://code.google.com/p/svg2vml/
Bear in mind that no matter how clever these hacks are, there is always a fundamental issue of performance. IE7/8's javascript interpreter is very slow by modern standards, and these are javascript-based tools trying to shoehorn very modern functionality into this old browser. They may well work, but don't try to do anything too clever with your canvas or SVG, or you'll kill the browser.
Finally, since you mentioned that you're using all this to draw graphs, I will point out the graphing module of the Raphael library. Raphael is a library which draws SVG graphics on all browsers (falling back to VML for IE). The graphing module provides all the usual graph types, wrapped in an extremely easy-to-use javascript API. And it is fully cross-browser compatible -- it works on all desktop browsers out of the box from the latest Chrome and Firefox all the way back to IE6. If you're struggling with cross-browser compatibility with the tools you're using now, you may want to switch to this library.
Hope that helps.

I have recently created an application in which I had to use toDataURL() but I was not able to find any way to do this in IE7/8. My application was an online image editor in which user was able to save the canvas contents. I believe there is not way we can use this method in IE7/8.

Does VML have an equivalent to SVG's marker element?

I'm working on a project which uses Raphael to render SVGs for Chrome, Firefox, and Safari, and VML for Internet Explorer.
Since Raphael doesn't have built-in support for SVG marker elements, I decided to write a plugin for it myself. I got the SVG side working no problem, but the VML docs aren't giving me any help in finding a good way to implement markers in VML.
Can anybody point me in the right direction?

No. Otherwise it would be part of Raphaël.

Which is better and why? RaphaelJS or HTML5 Canvas?

I found a vector library on the Internet that even works with IE6!
http://raphaeljs.com/index.html
It's amazing.
Now my question is it better than the upcoming HTML5 <canvas>? The only reason I ask is that it could be years before Microsoft implements a <canvas> that doesn't require a plugin for it to run.
And it will be even longer until all the IE users on the Internet get rid of their old browsers so that we can even justify using the HTML5 <canvas>.
I'm all about sticking to standards, but this one is just going to take too long, thanks to MS's slow development of their browser.
Thoughts?

Raphael is a vector graphics library, done using SVG, whereas HTML5 canvas is bitmap graphics.
If you want to do vector graphics, I think going with Raphael is probably a good choice over "just" canvas. As you say, canvas does not quite work with IE and it will probably be a while before it's natively supported. If Raphael does what you need, there is no particular reason not to use it.
Do note that there are also other libraries for this: Excanvas, which emulates canvas for IE using VML (as far as I know), and also some others which do the same with Silverlight and Flash but I forgot their names.
There's also Dojo, which has a component for abstracting canvas usage behind an easy to use interface, which also supports IE.
Having native canvas in all browsers will not make the libraries obsolete, since the libraries usually abstract some of the canvas complexities away, making the usage easier.

SVGWeb (http://code.google.com/p/svgweb/) by Google is what you want. It makes IE compatible with SVG, which is the standard, and which all other mainstream browsers already support. In other words, as google say, "Using the library plus native SVG support you can instantly target ~95% of the existing installed web base."

And you can use http://code.google.com/p/explorercanvas/ which implements the HTML5 Canvas Standard in IE. All you do is add:
<head>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head>
The difference between Canvas and SVG is explained as follows:
SVG and canvas aren't really
interchangeable technologies. SVG is a
type of retained mode graphics where
everything is drawn from a rather
abstract model (the SVG document).
Canvas on the other hand is a kind of
immediate mode graphics, where there
is no model and the client
(JavaScript) must take care of
redrawing, animations etc.

The answer depends on what you need:
if you need to add event handlers to the graphic objects: you need to use SVG. Else Canvas.
if no events are needed is performance important: if yes then Canvas 5.
Note that IE 9 supports Canvas and offers more HTML 5 support compare to other browsers!