Interactive Data Visualization with Backbone and D3

From my talk at Nation.js 2013: a look at how we built a complex data visualization web app with D3 and Backbone/Backbone.Marionette.

Resource links:

* https://pinboard.in/u:miketierney/t:backbone
* https://pinboard.in/u:miketierney/t:d3
* http://speakerdeck.com/miketierney/interactive-data-visualization-with-backbone-and-d3

Transcript

1. Copyright © 2013 Intridea Inc. All rights reseved. Interactive Data Visualization with Backbone & D3 Michael Tierney
2. Copyright © 2013 Intridea Inc. All rights reseved. Me Lead UI Developer at Intridea http://intridea.com   @miketierney
3. Copyright © 2013 Intridea Inc. All rights reseved. The Challenge Create a dynamic web application that pulls from a large collection of data to tell the project’s story using: ·Maps ·Charts ·Data tables ... and keeps them all in sync.
4. Copyright © 2013 Intridea Inc. All rights reseved. A few additional constraints ·involved a large number of varied data sets ·needed to empower users to compare and contrast that data ·needed to be accessible on many different platforms ·needed to be easily shareable (URL, embeddable content, and file download)
5. Copyright © 2013 Intridea Inc. All rights reseved. Our (high-level) solutions ·Have the server write some of the HTML, then enhance it using Backbone ·Take advantage of Backbone plugins to create modular components ·Use D3 to do data visualization
6. Copyright © 2013 Intridea Inc. All rights reseved. Why D3? ·Powerfully flexible - can build any visualization imaginable ·Optimal for complex plotting ·Small footprint - approximately 250kb
7. Copyright © 2013 Intridea Inc. All rights reseved. Setting up D3 Create modular charts ·Take advantage of inheritance ·Base module handles config ·“Child” modules handle data parsing
8. Copyright © 2013 Intridea Inc. All rights reseved. Setting up D3 window.BaseChartModule = function () { var chart = function(opts) { /* apply opts */ }; chart.prototype = { buildChart : function () {}, parseData : function () { // parse the data to be D3-friendly } }; return chart; }); // re-use `extend` from Backbone so we can just keep going window.LineChartModule = BaseChartModule.extend({ buildChart : function () { /* modify as necessary */ }; });
9. Copyright © 2013 Intridea Inc. All rights reseved. D3.nest() Data needs to look like: [{ key : “United States”, values : [{ country : “United States”, // for labeling tooltips datapoint1 : 3.4, datapoint2 : 4.2, datapoint3 : 7.5 }] }, { key : “Canada”, values : [{ /* ... */ }] }]
10. Copyright © 2013 Intridea Inc. All rights reseved. D3.nest() I had written: var parsedData = []; _.each(years, function (year) { var datum = {}; _.each(values, function (v) { datum[v.country] = v.value; parsedData.push(datum); }); });
11. Copyright © 2013 Intridea Inc. All rights reseved. D3.nest() D3.nest() does is so much more succinctly: d3.nest().key(function (d) { return d.country; }).entries(dataset);
12. Copyright © 2013 Intridea Inc. All rights reseved. Why Backbone? ·Can manage updates of data displayed in disparate areas ·Backbone.Marionette makes using modules easier ·Can build just what’s necessary
13. Copyright © 2013 Intridea Inc. All rights reseved. Setting up Backbone Used Marionette to create modules ·Main collection holds data ·Views handle events ·Views pass data to charts
14. Copyright © 2013 Intridea Inc. All rights reseved. Setting up Backbone & Marionette window.VisualizationApp = function() { var app = new Marionette.Application(); return app; }; Visualization.module(‘ChartApp’, function ($, _, BB, Mar) { // Define event handlers, views, etc., for specific instance }); var DataCollection = Backbone.Collection.extend({ model : Country // var Country = Backbone.Model.extend() }); var ChartView = Marionette.View.extend({ collectionEvents : { ‘selected:update’ : ‘updateChart’ }, updateChart : function (e) { /* ... */ } });
15. Copyright © 2013 Intridea Inc. All rights reseved. Handing o the data Charts are given the data using Views · // in chart-app.js, inside the module var myChart = new ChartView({ collection : DataCollection // all of the datapoints }); chart.show(myChart); // “chart” here is a Marionette Region
16. Copyright © 2013 Intridea Inc. All rights reseved. Handing o the data View filters the collection for “selected” items · // in views.js var ChartView = Marionette.ItemView.extend({ onBeforeRender : function () { this.selectedItems = collection.where({selected : true}) }, onRender : function () { ChartModule.buildChart(this.collection); } });
17. Copyright © 2013 Intridea Inc. All rights reseved.
18. Copyright © 2013 Intridea Inc. All rights reseved.
19. Copyright © 2013 Intridea Inc. All rights reseved.
20. Copyright © 2013 Intridea Inc. All rights reseved. Recap Create modular, loosely coupled pieces Backbone handles events and view rendering Only re-draw what is necessary Ensure that the D3 Charts are re-usable · · · ·
21. Copyright © 2013 Intridea Inc. All rights reseved. Resources Backbone: https://pinboard.in/u:miketierney/t:backbone D3: https://pinboard.in/u:miketierney/t:d3 Slides: http://speakerdeck.com/miketierney/interactive-data- visualization-with-backbone-and-d3 Will re-post those links to Twitter later today (@miketierney) · · · ·
22. Gracias Merci ͋Γ͕ͱ͏ Danke 谢谢 Thank You Copyright © 2013 Intridea Inc. All rights reseved.