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
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
インサイト情報からどこまで自動化できるか試してみた
takas0522
0
130
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
1.3k
Green Tea Garbage Collector の今
zchee
PRO
2
380
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
4
1.3k
“2件同時配達”の開発舞台裏 〜出前館PMが挑んだダブルピック実現に向けた体験設計〜
demaecan
0
180
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
160
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
140
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
350
PythonとLLMで挑む、 4コマ漫画の構造化データ化
esuji5
1
130
Pure Goで体験するWasmの未来
askua
1
170
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
320
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
71
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
It's Worth the Effort
3n
187
28k
Facilitating Awesome Meetings
lara
56
6.6k
How to train your dragon (web standard)
notwaldorf
96
6.3k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Designing for humans not robots
tammielis
254
25k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
950
Transcript
Ember with D3 @EmberNYC Heyjin Kim Ember Princess Engineer, SimpleReach
@heyjinkim @ember_princess
[email protected]
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
[email protected]