Emberjs view with raphael or d3

Question

I would like to display the ember.js view using raphael.js or d3.js. I understand that this can be done , but I can’t figure out how to make it work after reading all the documents and googling around. Any suggestions?

Hi, a world example, would be ideal to at least start me on the right track.

Answer 1

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

Since Ember.js came from Sproutcore 2.0, you don’t have to work hard to use existing code. Iv'e put a great Johannes example in Ember.js and created JSFiddle, see http://jsfiddle.net/pangratz666/BHYgQ/ . You should definitely check out the project on GitHub.

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

---

As for D3, you can take a look at the post by Alex Rothenberg Combining D3 and Ember to create interactive maps .

Answer 2

See this nice blog post by alex rothenberg:

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

Answer 3

I ported DC.js Crossfilter + D3 for Ember components https://github.com/andrewreedy/ember-dc