Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Interactive Data Visualization with Backbone an...

Mike Tierney
October 04, 2013

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

Mike Tierney

October 04, 2013
Tweet

More Decks by Mike Tierney

Other Decks in Programming

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. 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 · · · ·
  18. 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) · · · ·