Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ember with D3 for Data Visualization
Search
heyjin kim
June 21, 2014
Technology
0
210
Ember with D3 for Data Visualization
heyjin kim
June 21, 2014
Tweet
Share
More Decks by heyjin kim
See All by heyjin kim
Ember D3 EmberNYC
heyjinkim
1
180
Other Decks in Technology
See All in Technology
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
670
スプリントレビューを効果的にするために
miholovesq
9
1.4k
TROCCO今昔
gtnao
0
200
OpenTelemetry の Log を使いこなそう
biwashi
3
880
無理しない AI 活用サービス / #jazug
koudaiii
1
130
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
AIコードアシスタントとiOS開発
jollyjoester
1
220
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
150
SREを知らずに SREマネージャーになった話 / How I Became an SRE Manager Without Knowing What SRE Is
moneyforward
0
240
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
120
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
220
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
370
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Balancing Empowerment & Direction
lara
1
480
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Designing for humans not robots
tammielis
253
25k
Gamification - CAS2011
davidbonilla
81
5.4k
Facilitating Awesome Meetings
lara
54
6.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
How STYLIGHT went responsive
nonsquared
100
5.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
Ember with D3 @EmberNYC Heyjin Kim Ember Princess Engineer, SimpleReach
@heyjinkim @ember_princess heyjin@simplereach.com
None
video & slide
• Ember Component • Separate Concerns • Data Bindings &
Observers • Ember Inspector • Productivity Why Ember?
http://bl.ocks.org/mbostock/3885304 D3 Code
http://bl.ocks.org/mbostock/3885304 D3 Code scales render svg data Everything is one
place! domains
http://bl.ocks.org/mbostock/3885304 D3 in Ember Separate Concerns! (MVC) d3 code data
render svg scales & domains
Examples
Reusable Charts http://jsbin.com/tinifewa/4/edit
Updating Data with Multiple Components http://jsbin.com/zeferipe/4/edit
None
• Ember Component • Separate Concerns • Data Bindings &
Observers • Ember Inspector • Productivity Why Ember?
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}}
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
Data Bindings & Observers
Ember Inspector
Productivity
THANK YOU! @heyjinkim @ember_princess ! http://heyjinjs.us heyjin@simplereach.com