D3 in Ember

@NYCHTML5


 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

  • Focuses on binding DATA to DOM

D3 Examples 

http://bl.ocksplorer.org
http://christopheviau.com/d3list/gallery.html

TELLING STORIES WITH D3


    http://bost.ocks.org/mike



    Let’s Make a Bar Chart!


    http://bost.ocks.org/mike/bar

    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
    • Hard to maintain the code
    • Refactor code using OOP  to organize 

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

    complex application



    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

    http://jsbin.com/zeferipe/4/edit


    thank you!


    @heyjinkim
    http://heyjinjs.us
    heyjin@simplereach.com

    EMBER  D3 

    Made with Slides.com