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 


TELLING STORIES WITH D3




Let’s Make a Bar Chart!



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



thank you!


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

EMBER  D3 

D3 in Ember @NYCHTML5

By heyjinkim

Made with Slides.com

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,485

More from heyjinkim