Ember with D3 for Data Visualization

Transcript

1. Ember with D3
 @EmberNYC Heyjin Kim Ember Princess Engineer, SimpleReach
 
 @heyjinkim @ember_princess heyjin@simplereach.com
3. video & slide
4. • Ember Component • Separate Concerns • Data Bindings & Observers • Ember Inspector • Productivity Why Ember?
5. http://bl.ocks.org/mbostock/3885304 D3 Code
6. http://bl.ocks.org/mbostock/3885304 D3 Code scales render svg data Everything is one place! domains
7. http://bl.ocks.org/mbostock/3885304 D3 in Ember Separate Concerns! (MVC) d3 code data render svg scales & domains
8. Examples
9. Reusable Charts http://jsbin.com/tinifewa/4/edit
10. Updating Data with Multiple Components http://jsbin.com/zeferipe/4/edit
12. • Ember Component • Separate Concerns • Data Bindings & Observers • Ember Inspector • Productivity Why Ember?
13. Ember Component {{donut-chart content=content width=255 height=255}} {{donut-chart content=content_1 width=22 height=22}} {{bar-chart content=content}} {{donut-chart content=content_2 width=22 height=22}} {{donut-chart content=content_3 width=22 height=22}} {{donut-chart content=content_4 width=22 height=22}} {{donut-chart content=content_5 width=22 height=22}}
14. Template
 ! rendering DOM Separate Concerns DATA! ! [82, 79, 143, 191] Ember Component
 
 handling DATA
 updating DOM
 ! 
 
 CSS 0 50 100 150 200 April May June July D3 code scales & domains
15. Data Bindings & Observers
16. Ember Inspector
17. Productivity
18. THANK YOU! @heyjinkim
 @ember_princess ! http://heyjinjs.us
 heyjin@simplereach.com