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
Using D3 with Backbone, Angular and Ember - Apr 2014
- 4,871