Using d3

with Backbone, Angular and Ember



architecture


an example of bad code



http://opensoul.org/2012/05/16/the-plight-of-pinocchio/


An example of bad code



 

text: $(this).find('textarea').val()


Instead, use a model  



  

 $('#statuses').append('<li>' + data.text + '</li>');


Instead, use a directive


 

 $.ajax({url: '/statuses', success: function(data)  {...}


Instead, use a route



costs and benefits

of frameworks

Where does d3 fit in?


Data vis is becoming prominent:

  • Square
  • Localytics
  • Chart.io
  • Plotly
  • Addepar...








Our applications are object-oriented
but D3 tends to be procedural


solution

  • Encapsulate your D3 code
  • Integrate it with your app
  • Embrace your framework's idioms


 

 

the bubble chart


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

50 lines of code

object-orientize the chart


Two common patterns:

  • prototypes
  • closures with getter/setters

    • http://bost.ocks.org/mike/chart/

*Check out d3.chart for an easy way to make reusable charts
 
 function bubbleChart() {
       // Config variables    var margin = {top: 10, right: 10, bottom: 10, left: 10},
        diameter = 400,        bubble = d3.layout.pack()
        ...,
    function chart(selection) {
      selection.each(function(data) {

        // Build the chart, with reusability in mind (e.g. lifecycle events)

      });    }
    //Public methods    chart.margin = function(_) {...}        return chart;}

using our chart object


var data = [get_some_data]

var chart = bubbleChart()
  .margin({top: 0, right: 20, bottom: 0, left: 20});
d3.select('#demo')
  .datum(data) 
  .call(chart);







Some things to consider:

  • View hierarchy & cleanup
    • Marionette, Chaplin, Thorax
  • Appending a view's `el`
  • Use React (or something similar)




Some things to consider:

  • Enhanced our bubble chart in isolation
    • Directive made it easy to incorporate
  • Remember to $watch
  • Can use our chart as a service - D3 too


Some things to consider: 

  • Bubble chart still doesn't know about Ember, "companies", etc.
  • Components (like directives) completely sharable
  • Ember data
  • Computed properties FTW

wrapping up

We're really talking about reusability

  • Enhancing the chart is an iterative process
  • Define "transform" on  views/directives/components
  • Which framework is "best" for D3?
  • Check out d3.chart! Or, look up some patterns



thanks!

@samselikoff
github.com/samselikoff/talks

Using D3 with Backbone, Angular and Ember - Apr 2014

By Sam Selikoff

Made with Slides.com

Using D3 with Backbone, Angular and Ember - Apr 2014

  • 4,781

More from Sam Selikoff