Tweet
Tweet

Slide 1

Slide 1 text

Ember with D3
 @EmberNYC Heyjin Kim Ember Princess Engineer, SimpleReach
 
 @heyjinkim @ember_princess [email protected]

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

video & slide

Slide 4

Slide 4 text

• Ember Component • Separate Concerns • Data Bindings & Observers • Ember Inspector • Productivity Why Ember?

Slide 5

Slide 5 text

http://bl.ocks.org/mbostock/3885304 D3 Code

Slide 6

Slide 6 text

http://bl.ocks.org/mbostock/3885304 D3 Code scales render svg data Everything is one place! domains

Slide 7

Slide 7 text

http://bl.ocks.org/mbostock/3885304 D3 in Ember Separate Concerns! (MVC) d3 code data render svg scales & domains

Slide 8

Slide 8 text

Examples

Slide 9

Slide 9 text

Reusable Charts http://jsbin.com/tinifewa/4/edit

Slide 10

Slide 10 text

Updating Data with Multiple Components http://jsbin.com/zeferipe/4/edit

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

• Ember Component • Separate Concerns • Data Bindings & Observers • Ember Inspector • Productivity Why Ember?

Slide 13

Slide 13 text

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}}

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Data Bindings & Observers

Slide 16

Slide 16 text

Ember Inspector

Slide 17

Slide 17 text

Productivity

Slide 18

Slide 18 text

THANK YOU! @heyjinkim
 @ember_princess ! http://heyjinjs.us
 [email protected]