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