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 D3 EmberNYC
Search
heyjin kim
June 21, 2014
Technology
1
160
Ember D3 EmberNYC
heyjin kim
June 21, 2014
Tweet
Share
More Decks by heyjin kim
See All by heyjin kim
Ember with D3 for Data Visualization
heyjinkim
0
200
Other Decks in Technology
See All in Technology
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
420
いいたいことちゃんという
tkengo
0
240
M&A戦略を支えるデータマネジメント (MIDAS Tech Study #16 GENDA Komiyama)
kommy339
1
120
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
630
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
260
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
150
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
1.3k
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
160
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
190
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1k
個人のAWSアカウントをマルチ運用してみた
miura55
2
170
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
238
11k
Making Projects Easy
brettharned
109
5.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Fireside Chat
paigeccino
22
2.6k
Building Your Own Lightsaber
phodgson
100
5.7k
Docker and Python
trallard
35
2.7k
Atom: Resistance is Futile
akmur
260
25k
Done Done
chrislema
178
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
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]