emberjs view with raphael or d3

Question

I would like to render an ember.js view using either raphael.js or d3.js. My understanding is that it is possible to do this, but I can't seem to figure out how to get this to work after reading all the docs and googling around. Any suggestions?

A hello world example would be ideal to at least get me started on the right track.

Answer 1

There is a blog post by Johannes Fahrenkrug, using Raphael.js with Sproutcore 2.0 http://blog.sproutcore.com/using-raphael-js-with-sproutcore-2-0/. The code is hosted at https://github.com/jfahrenkrug/sproutcore-raphael.

Since Ember.js kinda evolved from Sproutcore 2.0, it shouldn't be to much work to use the existing code. Iv'e ported the excellent example by Johannes to Ember.js and created a JSFiddle, see http://jsfiddle.net/pangratz666/BHYgQ/. You should definitely check out the project on GitHub.

My ported example is hosted on GitHub and can be seen live at http://pangratz.github.com/ember-raphael.

---

As for D3, you can take a look at Alex Rothenberg's post Combining D3 and Ember to Build Interactive Maps.

Answer 2

See this good blog post from alex rothenberg:

http://www.alexrothenberg.com/2012/05/30/interactive-maps-with-d3-and-ember.html