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
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
670
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
390
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
170
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
510
QuickBooks®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
qbsupportinfo
0
110
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
12
3.3k
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
170
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
620
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
210
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
390
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
120
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
1
210
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Unsuck your backbone
ammeep
671
58k
Gamification - CAS2011
davidbonilla
81
5.4k
A designer walks into a library…
pauljervisheath
207
24k
Raft: Consensus for Rubyists
vanstee
140
7k
Visualization
eitanlees
146
16k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
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]