Reusable D3 charts with Ember.js Components
I recently read a good article called D3.js in Angular.js Directive from DashingD3 and thought it would be interesting to recreate the example using Ember.js components.
Here's how I created the example using an Ember.js component:
Reusable D3 charts with Ember.js Components
As you can see in the JSBin, we have two different bar charts with distinct widths and heights. (Direct Link)
To implement more bar charts, simply add the component to the application template again:
{{bar-chart width=960 height=500 data=content}}
Mike Bostock wrote an article, Towards Reusable Charts and the entire time I was reading it I thought about Ember's components.
In his article Mike says:
"Internally, the chart implementation becomes slightly more complex to support getter-setter methods, but convenience for the user merits additional developer effort!"
I’d like to propose that using Ember.js Components is one of the best ways to encapsulate reusable charts. Ember accomplishes the same thing as Mike’s example, but it feels more natural and less complex doing it in Ember because getter and setter methods are a fundamental part of Ember.
For you Angular peeps, an Ember.js component is roughly equivalent to an E restricted, transcluded, isolate-scoped directive.
For a quick comparison of bar charts using different frameworks:
Here's another example that I created Donut Charts:
I'm baking a lot of donuts with Ember.Component: http://t.co/7pCxxWxndc #emberjs #d3js #donutchart
— Heyjin Kim (@heyjinkim)
