D3 in Ember
@NYCHTML5
Heyjin Kim
Engineer, SimpleReach
@heyjinkim
heyjin@simplereach.com
Simplereach
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/475002/pasted-from-clipboard.png)
what is D3?
-
JavaScript Library by Mike Bostock
- Manipulating DOM based on data
- Great Data Visualizations in SVG
- Data-Driven Documents
Why D3?
-
Flexibility to make charts in HTML or SVG
-
Make own style charts with CSS
-
Complicated math
Focuses on binding DATA to DOM
D3 Examples
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/475424/pasted-from-clipboard.png)
TELLING STORIES WITH D3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/475375/pasted-from-clipboard.png)
Let’s Make a Bar Chart!
data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/477827/pasted-from-clipboard.png)
d3.tsv()
d3.text()
APPENDING DOM ELEMENTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/477049/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/477052/pasted-from-clipboard.png)
Math
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/477045/pasted-from-clipboard.png)
D3 is AWESOME!
however,
hard things with d3
Hard things with d3
- Spaghetti Code
- Making Reusable Charts
- Handling SVG with properties
Spaghetti Code
- Dealing with DOM in complex applications
-
Turns into complicated spaghetti
- Hard to maintain the code
-
Refactor code using OOP to organize
Further Reading:
Why we use d3 & ember for data visualization
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/475647/spaghetti.png)
complex application
reusable charts
- Towards Reusable Charts:
(Encapsulating reusable charts in D3)
http://bost.ocks.org/mike/chart
- d3.Chart
http://misoproject.com/d3-chart
Further Reading:
handling svg with properties
-
A common point of confusion in SVG is distinguishing between properties
that must be specified as attributes and properties that can be set as styles
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/477064/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/477066/pasted-from-clipboard.png)
Let's make them easy
with Ember
what is ember?
-
MVC JavaScript framework
-
by Yehuda Katz and Tom Dale
-
Creating ambitious web applications
made easier with ember
-
Separate Concerns
-
Ember Component
-
Data Bindings & Observers
separate concerns
Easy to maintain the code
D3 code (everything is in one place)
separate concerns
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/477848/pasted-from-clipboard.png)
D3 in ember (separate concerns)
Ember component
Easy to make (encapsulated) reusable charts
web component
- To make reusable modular code like widget
- Define your own application-specific HTML tags
then implement their behavior using JavaScript
-
W3C is still working on it!
http://www.w3.org/TR/components-intro
ember component
- Encapsulated d3 code in Ember Component
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/477492/pasted-from-clipboard.png)
- Turn your chart into an HTML tag
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/477491/pasted-from-clipboard.png)
-
Easily migrate Ember components
to the W3C standard in the future
http://emberjs.com/guides/components
D3 ember components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/heyjinkim/images/475987/pasted-from-clipboard.png)
Data bindings & observers
Easy to configure properties & update DOM
demo
D3 charts in Ember Components
thank you!
@heyjinkim
http://heyjinjs.us
heyjin@simplereach.com
EMBER
D3
D3 in Ember @NYCHTML5
By heyjinkim
D3 in Ember @NYCHTML5
D3.js is a great library for data visualization, but when dealing with complex applications and DOM(SVG) manipulations are not fun. Let's make them easier with Ember.js framework.
- 3,425