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
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
320
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
180
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
130
Green Tea Garbage Collector の今
zchee
PRO
2
380
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
110
Pure Goで体験するWasmの未来
askua
1
170
バイブコーディングと継続的デプロイメント
nwiizo
2
380
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
250
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
140
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
350
KMP の Swift export
kokihirokawa
0
310
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Site-Speed That Sticks
csswizardry
11
870
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
KATA
mclloyd
32
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
950
BBQ
matthewcrist
89
9.8k
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]