D3 fallback to Canvas (or other IE8 alternatives)

7,124 views
Skip to first unread message

IPWright

unread,
Oct 1, 2012, 12:07:26 PM10/1/12
to d3...@googlegroups.com
I'm interesting in using D3 but need to support IE8 with a zero browser deployment footprint (can't install chrome frame for example).

I've read a number of old questions about IE8 support, and I've also read some about using Canvas with D3. I was just wondering if somebody could give me an update to date view on the situation with IE8 compatibility as it's quite difficult to determine for someone new to the group? So far I've identified:

  • d34raphael
  • svgweb
  • D3 using Canvas
How practical is it to use one of these? My aim is to provide a number of visualizations (map, chord, sankey... probably 9/10) so I want as small an overhead as possible to modify each one and try and stick to as much of the vanilla code as possible for easy upgrade paths in the future.

Thanks for your help

Léo Gourven

unread,
Oct 1, 2012, 12:56:29 PM10/1/12
to d3...@googlegroups.com
You should take a look at r2d3 it works on IE7+
It was used by Interactive Things on this project : http://www.education-inequalities.org/


Léo

IPWright

unread,
Oct 2, 2012, 4:02:37 AM10/2/12
to d3...@googlegroups.com
Leo,

Thanks for the response, it looks interesting but I'd still like to leave the question open for other suggestions. Looking at r2d3 it says:
 
R2D3 uses Raphael under the covers for rendering SVG and VML when necessary.

But then later in the limitations section it says:

 IE < 9 does not support styling rendered R2D3 elements with CSS.

IE9 however supports normal SVG, and therefore shouldn't need IE9. Hence I don't see why there is a limit with it. Just raises a few concerns.

Regards

Kai Chang

unread,
Oct 2, 2012, 4:09:55 AM10/2/12
to d3...@googlegroups.com
IE8 doesn't support canvas: http://caniuse.com/canvas

It sounds like R2D3 uses SVG for IE9, and thus CSS works, from that quote.

IPWright

unread,
Oct 2, 2012, 4:20:56 AM10/2/12
to d3...@googlegroups.com, kai.s...@gmail.com
Bother... You're correct on both counts (I forgot currently we use a Canvas -> VML converter in our code) and I obviously can't read... R2D3 it sounding like a good option thus far.

Chris Viau

unread,
Oct 2, 2012, 3:02:54 PM10/2/12
to d3...@googlegroups.com, kai.s...@gmail.com
You can try:

-Not using SVG, for example plain HTML as in this tutorial: http://vallandingham.me/d3_without_svg.html
-Using a Canvas to Flash shim
-Static image rendered server-side
-Using only D3 helpers and render with some abstraction layer like Raphael or dojox.gfx (would be my choice)
-Hack the D3 source code to integrate another renderer (very ugly)

Every solution is crippling D3 very bad. Before choosing these options, I would ask myself why use D3? Is it for the generators, DOM binding, helpers, layout? And which of these features can't be replicated as plain javascript on top of another rendering engine?

Chris

marc fawzi

unread,
Oct 2, 2012, 3:08:33 PM10/2/12
to d3...@googlegroups.com, kai.s...@gmail.com
$0.02 ... if you're developing something new (which is riding on top
of D3) the question is can you exclude IE8 and older? What gets in the
way is usually the Dev Manager or Product Manager who is hell bent on
supporting IE8. In many cases, those people can be educated as to the
huge R&D cost of supporting IE8.

IPWright

unread,
Oct 4, 2012, 4:25:06 AM10/4/12
to d3...@googlegroups.com, kai.s...@gmail.com
Thanks for the answer Chris,

I guess at the moment I don't know enough about D3 to understand the implications of these alternatives. I think the option that most appeals is to use Raphael or similar (e.g. r2d3 or d34raphael), but you've mentioned all the examples would cripple D3. Can you elaborate to some more specifics - how would using Raphael cripple D3? Ideally what I want to produce is something that uses D3 out of the box if it can, and an alternative if need be (so when IE8 is no longer used we're back to vanilla D3).

Why would I like to use D3? I've not used it a huge amount yet so I don't know what it's fully capable of, but the Visualizations that can be produced in it are stunning and the interactivity is important for what my needs. So I guess the layout side of things. We've tried using other things, namely InfoVis which isn't able to produce as many visualizations and has interactivity drawbacks being canvas. Part of it, is we don't want to spend ages re-inventing the wheel. D3 looks good and is often raved about, so I'm trying to find a way to fit it in.

Thanks

Marc: Yes it costs a lot to support IE8, but those restrictions aren't driven internally.

IPWright

unread,
Oct 4, 2012, 4:29:41 AM10/4/12
to d3...@googlegroups.com, kai.s...@gmail.com
I should add that being able to style from CSS is also a big win. The fact that I'm hoping to host this in an ASP.NET site means I hope that I'm able to provide vanilla D3, or a different version depending on the browser type, something which I imagine to be much harder from a normal hosted site.

Mike G

unread,
Oct 4, 2012, 5:27:45 AM10/4/12
to d3...@googlegroups.com, kai.s...@gmail.com
Being one of those Product Managers, I can tell you that sometimes, it isn't our wishes at all, but our customers'. If you work with any Federal agency, you will find a lot of undesirable "rules" imposed upon you. It isn't due to lack of education - even the customer knows the cost of supporting older versions of browsers (try IE7!). However, there are processes in place that cost big $$ to "accredit" and certify software to ensure it is "safe" to run on various networks in this space, and not one, but each agency has their own accreditation process - since different software will be in the mix. That process is time consuming, and painful. They are always in the process of doing the next round of accreditation - but are always behind. Thus, in order to deliver appropriate value to our customer, we have to live within the bounds that they are (unfortunately) forced to live in themselves. Thus, the very reasonable request being made in this thread.  I do agree with you that this is expensive on my team - but it is a constraining requirement that can't be changed. D3 is elegant, fast, and light, which makes for a great development tool - hence the desire to try and find a way to make it work with older browsers.

Chris Viau

unread,
Oct 4, 2012, 11:40:21 AM10/4/12
to d3...@googlegroups.com, kai.s...@gmail.com
That's an excellent answer. That's very naive to think you can always get rid of constraints. I like the idea of charging the client for cross-browser support. D3 will never be cross-browser and workaround are costly. There is no rendering engine under D3. It uses the web technologies you have, but provide helpers for standard-compliant technologies (no Flash or VML, sorry). Raphael is an abstraction layer to use a unified syntax that will translate to SVG and VML under the hood. Dojox.gfx also translate to SVG, VML, SIlverlight and Canvas. I don't know why I don't see this library everywhere as it's very impressive and has a clean API. Besides, technically, all D3 charts can be made with Raphael/dojox.gfx. But the D3 community is packed with viz experts as it is the best tool to describe how to map data to graphics, which is fundamental in visualization.

So how would using Raphael cripple D3? D3 can not write directly to the Raphael layer, unless you use some (messy but very interesting) workaround as in R2D3, d34raphael and also d3-threeD. The binding is not generic and only works on specific features. What I often see is using D3 generators to generate SVG paths that can be used directly for Raphael, as it uses a syntax very close to SVG.

Nate Vack

unread,
Oct 4, 2012, 11:50:40 AM10/4/12
to d3...@googlegroups.com
On Thu, Oct 4, 2012 at 4:27 AM, Mike G <mdgi...@gmail.com> wrote:

> D3 is elegant, fast, and light, which makes for a
> great development tool - hence the desire to try and find a way to make it
> work with older browsers.

Well, again: *D3* works just fine in older versions of IE. A lot of
the power in making super awesome visualizations with interactions
comes from SVG -- having a standard nested DOM with vector graphics is
really excellent -- but that simply does not exist in vanilla IE8-.
There are various hacks that kinda work (Chrome Frame being my
favorite), but they all have drawbacks.

The Raphael-based approaches will tend to expose differences between
VML and SVG, especially with respect to styling and interaction. (The
dojo.gfx tricks would let you add Silverlight and dojo's own canvas
interaction modalities into the mix, too. Joy!)

Ultimately, D3 only provides a limited part of what you'll need to
know to make a good interactive visualization. You'll also need to
understand your rendering and interaction layers at quite a deep
level. If you're living in an SVG-only world, that means your
experience in HTML helps you a lot -- and D3 does give you some good
shortcuts to apply styles and attributes, as well as create elements.
If you go Raphael, that's somewhat less true.

Asking for something that's exactly like D3 except that it works on
older IE versions without hacks is like asking for a flying car.
Everyone would like it, but that doesn't mean it exists, or that it
can practically exist. Sorry.

Best,
-Nate

Marc Fawzi

unread,
Oct 4, 2012, 11:53:43 AM10/4/12
to d3...@googlegroups.com, d3...@googlegroups.com, kai.s...@gmail.com
The passage of time is what makes the cost vs reward of supporting IE8 a simple issue: the further we go along the lesser the reward while cost stats the same.

So it's not an argument frozen in time. Naive today in most commercial settings but won't be so naive in a year or two, so the question is whether or not the dwindling reward justifies the cost

Sent from my iPhone

Chris Viau

unread,
Oct 4, 2012, 1:39:46 PM10/4/12
to d3...@googlegroups.com, kai.s...@gmail.com
Just to be clear, I know your answer was not the naive: "you have a problem? Just forget about it before trying to find a solution" we often see in forums. Yes, D3 is about moving the web forward. And IE below 10 will soon feel just like an old recurring nightmare from the past. I work for one of the few companies lucky enough to work for Federal agencies and not have to support IE>5<10 Another privilege of working in a startup ;)

marc fawzi

unread,
Oct 4, 2012, 2:06:58 PM10/4/12
to d3...@googlegroups.com, kai.s...@gmail.com
Yeah, the frustration we have with IE as a platform (not an uncommon
one) drives my "is it even worth it" line of questioning.

I'd rather spend time getting D3 to run on a Gameboy than on IE8

But in the real world things are just not that fantastic

Has anyone had any positive experience with D3 + Canvas? I'm using it
to go around the .append delay for SVG (which I heard here that it was
fixed in latest Chrome Nightly) and it's applicable for me when
projecting a lot of data on a map. It's also for doing things with
Canvas that are easier done in canvas than SVG. And it works on IE8
with Flash Canvas (haven't tried but it should)

Nate Vack

unread,
Oct 4, 2012, 2:20:01 PM10/4/12
to d3...@googlegroups.com
On Thu, Oct 4, 2012 at 1:06 PM, marc fawzi <marc....@gmail.com> wrote:

> Has anyone had any positive experience with D3 + Canvas?

See this example:

http://bl.ocks.org/3180395

The only downsides to canvas involve the fact that you don't get a DOM
with it; you're just drawing pixels to a canvas, so CSS doesn't work
at all and you need to handle interactivity yourself (eg, there's no
"bind a click handler to this circle" business).

Canvas also is a very different programming environment --
understanding the state stack and offscreen canvases can make your
life much, much easier (and performance much better).

Good luck!
-Nate

marc fawzi

unread,
Oct 4, 2012, 2:53:22 PM10/4/12
to d3...@googlegroups.com
Thanks for the tip about offline canvases and I think Kinetic.JS has
some kind of canvas buffer...

I find the D3 DOM-to-Canvas scheme very convenient (for now and until
I run into any deeper issues)

The circles in this example below were generated thru D3 DOM-to-Canvas

http://www.youtube.com/watch?v=xSqVpQjDAjs

Actual SVG via D3 in Chrome produced circles with black color (no
color) and frozen circles, so that was a no go and I believe it might
be due to D3.append performance in SVG DOM in Chrome.

A real-time version of the above will be publicly available soon. I'm
going to try an open source all our visualization work. But in the
meantime you'll have to take my word for it: D3 DOM-to-Canvas works
where D3 SVG fails (in the case of the circles)

Marc

codegrappler

unread,
Oct 5, 2012, 9:47:42 AM10/5/12
to d3...@googlegroups.com
Hello, I'm the creator of R2D3. D3 has enabled me to easily build many amazing and awesome data visualizations.  I've never experienced this level of simplicity and elegance with any other library.  The only problem I encountered was our team needed to support IE, and the only practical option for maintaing visualizations that worked in IE was to fallback to a monolithic, uncustomizable charting framework. So I built R2D3 in an attempt to support as much of D3/SVG as possible on IE.  The idea is that when we no longer need IE < 9 support, we can swap out R2D3 for D3 with minimal code changes.  When building R2D3, I have 2 major goals in mind:

1.  Modify as little of D3 as possible
2. Support as much of SVG as possible.


So far I've been able to work towards these goals by "implementing" DOM APIs to raphael elements. This enabled D3 to consume them and manipulate them like it would regular SVG elements without needing to change D3.  As mentioned earlier, this is messy, but at the same time it does work.  Using this approach, I've been able to get event binding, transitions, and attribute setting working as expected.  The remaining pieces are more complicated (groups, css, transforms), but I think they can be tackled:

I'd very much appreciate any feedback on features, bugs, or shitty code I have in R2D3. I'd love to make this library as awesome as it can be, until we no longer need it (which is hopefully VERY soon!).

Cheers!
-Mike

IPWright

unread,
Oct 8, 2012, 4:13:56 AM10/8/12
to d3...@googlegroups.com
Mike,

Indeed and your efforts are appreciated. I've already asked a question on about R2D3 on your github page, but thought I'd respond here too.

Compare to the other alternatives R2D3 seems the best for our needs, we had someone take a look at svgweb (didn't look promising) and D34Raphael although similar in principle I'm not sure was quite as far along as R2D3 and seemed to have issues around events etc (fairly important). At the moment I'm playing with R2D3 to see how far we can get, but not knowing D3 or Raphael really (and having very little JavaScript under my belt) it's a little bit of a battle. I've got some of the way there, and I believe the lack of CSS styling may now be my current hurdle, which unfortunately is probably a fairly big one. I'd be interested to know your timescales on looking at this (I'm currently proto-typing, but need to be able to demonstrate functionality, so if I can hack something together for the time being)...

Cheers

Antony Meyn

unread,
Oct 8, 2012, 10:55:44 AM10/8/12
to d3...@googlegroups.com
I'm trying to find some examples that use R2D3, and am not sure if its too early to be looking for some.

But I have a basic question, is it possible to bind data with r2d3 and use the force layout, for example, i'm trying to convert the following simple example to a R2D3 implementation to check how it works. http://bl.ocks.org/1095795

regards,

Antony Meyn

unread,
Oct 8, 2012, 12:06:28 PM10/8/12
to d3...@googlegroups.com
Hi, I have also posted this question stack overflow http://stackoverflow.com/questions/12785324/getting-d3-js-to-work-with-raphael-js about getting raphael.js to help make d3 cross browser compliant. 

mhemesath

unread,
Oct 9, 2012, 3:47:21 PM10/9/12
to d3...@googlegroups.com
D3 data binding in R2D3 is working as expected.  As for the other pieces, the major pieces of missing functionality for force graphs that haven't been implemented yet are the following:

* Styling with CSS
* Groups (semi-working in a branch)
* Drag events

I plan on wrapping up groups as soon as possible, and then moving onto CSS styling.  Once those are implemented, R2D3 will be to the point we can swap many examples in the d3 project with R2D3 and start to find the small missing features.  If you can help identify the pieces of the force graph that dont' work in R2D3 that would be a huge help for driving the R2D3 project forward to meet your needs.

Thanks!
-Mike

marc fawzi

unread,
Oct 9, 2012, 6:12:26 PM10/9/12
to d3...@googlegroups.com
But can it drive an X-Wing Fighter? 

Landon Wilkins

unread,
Jan 30, 2013, 11:51:22 AM1/30/13
to d3...@googlegroups.com
You are an awesome person. I found r2d3 this morning. Please keep up the good work!

mhemesath

unread,
Jan 30, 2013, 12:38:21 PM1/30/13
to d3...@googlegroups.com
Wow, thanks for the compliment.  Please log any issues you find and I will try me best to resolve theM!

Craig Oshima

unread,
Feb 11, 2013, 3:03:58 PM2/11/13
to d3...@googlegroups.com
Yeah, I've been off/on looking at options for supporting D3 on IE the past couple weeks, and r2d3 seems like the best option at this point. Still haven't settled on using D3 yet, but I so want to!

Ayesha Mahmood

unread,
Feb 11, 2013, 5:58:55 PM2/11/13
to d3-js
Hi,

I cant load R2D3 in IE8 without errors. Following code adds it to our application:

<!--[if lte IE 8]><script src="<@s.url value="/third-party/d3/r2d3.v2.js" />"></script><![endif]-->
<!--[if gte IE 9]><!--><script src="<@s.url value="/third-party/d3/d3.v2.js" />"></script><!--<![endif]-->

It breaks in IE8. Says a script has become unresponsive. And just hangs for a good few minutes.


On Mon, Feb 11, 2013 at 3:03 PM, Craig Oshima <cr...@velocloud.net> wrote:
Yeah, I've been off/on looking at options for supporting D3 on IE the past couple weeks, and r2d3 seems like the best option at this point. Still haven't settled on using D3 yet, but I so want to!

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

mhemesath

unread,
Feb 18, 2013, 10:53:23 AM2/18/13
to d3...@googlegroups.com, aye...@gwu.edu
Your visualization is too intensive for IE.  I have ideas on improving this but the reality is IE 7 & 8 can't take the load modern browsers can.  Here is my plan for optimizing R2D3

1.  Clone nodes rather than create them. (http://jsperf.com/clonenode-vs-createelement-performance/2)
2.  Allow an option to disable styling with CSS (Looking up styles in CSS is pretty intensive)

I think after I get these 2 implemented it should enable more intensive visualizations, but there will always be that gap in performance with modern browsers.

Bijan Mishra

unread,
Mar 14, 2014, 2:39:06 AM3/14/14
to d3...@googlegroups.com




may i get the source code of this project : http://www.education-inequalities.org/
because i am having problem with my d3 graphs on IE. i have around 3000 graphs in my project using angularjs,d3js and nvd3js..now its impossible to change the graphs.
and re design it.i need some js file based on IE or solution to this problem where my d3 graphs can appear in IE.
 
Reply all
Reply to author
Forward
0 new messages