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
180
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
210
Other Decks in Technology
See All in Technology
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
490
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
Model Mondays S2E02: Model Context Protocol
nitya
0
210
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
640
本当に使える?AutoUpgrade の新機能を実践検証してみた
oracle4engineer
PRO
1
140
Definition of Done
kawaguti
PRO
6
470
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
120
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
110
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.1k
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
170
地図も、未来も、オープンに。 〜OSGeo.JPとFOSS4Gのご紹介〜
wata909
0
100
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
A Modern Web Designer's Workflow
chriscoyier
693
190k
What's in a price? How to price your products and services
michaelherold
246
12k
The Language of Interfaces
destraynor
158
25k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Raft: Consensus for Rubyists
vanstee
140
7k
Building Applications with DynamoDB
mza
95
6.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Facilitating Awesome Meetings
lara
54
6.4k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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]