D3 in Ember



Heyjin Kim

Engineer, SimpleReach


@heyjinkim

heyjin@simplereach.com



Simplereach



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 for scales & domains

  • Focuses on binding DATA to DOM

D3 Examples 


TELLING STORIES WITH D3





Let’s Make a Bar Chart  in HTML





Let's make a Bar Chart in SVG


examples:

data



d3.csv()
 d3.tsv() 
d3.text()

APPENDING DOM ELEMENTS



math







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
  • Refactor code using OOP  to organize 
  • But, I don't want to do this by hand


Further Reading: 
Why we use d3 & ember for data visualization

how about ramen code :)




reusable charts



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




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



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 
  • Turn your chart into an HTML tag
     


 

D3 ember components



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

By heyjinkim

Made with Slides.com

D3 in Ember

  • 1,772

More from heyjinkim