d3 (Data Driven Documents) and Internet Explorer

d3 is Mike Bostock's amazing javascript library for creating data visualizations with SVG - scalable vector graphics. But widely used Internet Explorer 8 and 7 won't render visualizations created with d3. Here is why along with some solutions.

Why d3 won't work well with Internet Explorer

1) d3 outputs SVG (scaleable vector graphics) markup to be interpreted by the browser. Internet Explorer 8 and below, do not recognize SVG, but rather VML (Vector Markup Lanuage).

2) The d3 javascript library currently contains some javascript which cause errors with IE8 and below.

3) Many of the examples online of using d3 contains javascript which causes errors with Internet Explorer.

Some Solutions to Use d3 with Internet Explorer.

1) When you find a method in d3 that cause errors with IE, don't use it. When you write javascript that casues errors in IE, try to use jQuery to accomplish the same thing:

For example: Many of the examples of using d3 use the javascript map method. This often causes errors with IE8.

So something like this:

var profile = [ {dis: 0, ele: 4902.9}, {dis: 1, ele: 5122}, {dis: 2, ele: 5227.4}, {dis: 3, ele: 5206.7}, {dis: 4, ele: 5240.5} ];

var data = profile.map(function(d) {
        return [ {dis: d.dis, ele: d.ele}];
} )

will cause an error in Internet Explorer.

One solution is to use JQuery to get around this.

var profile = [ {dis: 0, ele: 4902.9}, {dis: 1, ele: 5122}, {dis: 2, ele: 5227.4}, {dis: 3, ele: 5206.7}, {dis: 4, ele: 5240.5} ];

var data = jQuery.map(profile, function(d) {
        return [ {dis: d.dis, ele: d.ele}];
    } );

jQuery will also help you with other cross browser problems such as finding the location of the pointer on the screen!
// example mousemove jquery.....
var mousex;
var mousey;

// the mouse location within a specific div
$('#left_bar').mousemove(function(e){
               mousex = e.pageX - this.offsetLeft;
              mousey = e.pageY - this.offsetTop;
 });

2) Use Sencha's Raphael library to do the output. Raphael detects browser and outputs either SVG or VML.

// here is our previous jQuery mapping to get around IE problems....

var profile = [ {dis: 0, ele: 4902.9}, {dis: 1, ele: 5122}, {dis: 2, ele: 5227.4}, {dis: 3, ele: 5206.7}, {dis: 4, ele: 5240.5} ];

 // use jquery.map instead of javascript map because IE has problems with it
    var data = jQuery.map(profile, function(d) {
        return [ {dis: d.dis, ele: d.ele}];
    } );

//then use the d3 line generator with these data to create the line....   

var profile_line = d3.svg.line()
        .x(function(d) { return x(d.dis); })
        .y(function(d) { return y(d.ele); });

// but now draw the line with Raphael, so that IE8 and below will get the VML that they can do something with

var path = paper.path(profile_line(data)).attr({stroke:'#BBB', "stroke-width":'8', "stroke-linejoin": "round" });
 

Click here see an example of these tactics used to create a visualization with d3 and Raphael

Notes:

A growing list of d3 functions that will cause errors in IE8:

group.append will cause error: "Object does not support this property or method"