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.
There is a blog post by Johannes Fahrenkrug, using
Raphael.jswithSproutcore 2.0http://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.