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 

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  in HTML

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




    Let's make a Bar Chart in SVG

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

    examples:
    http://bl.ocks.org/mbostock

    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
    http://jsbin.com/zeferipe/4/edit


    thank you!


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

    EMBER  D3 

    Made with Slides.com