Ember and d3

interactive dashboards



Audience

  • Beginner to intermediate D3
  • Little to no experience with JS MV*
  • Want to incorporate D3 into applications (e.g., a  dashboard)
  • Curious about Ember!






never heard of d3?

You should check it out!



So, You're leveling up in D3

Why use a framework?

Like in everything...


Separation of concerns

  • Store your data somewhere
  • Handle events
  • Will you want routing?
  • Reusable components

Why reinvent the wheel?


why ember?

  • Datavis is about data. Ember gives you
    • data bindings
    • computed properties
    • observers
  • Persistent controllers
  • Easy routing
  • Fixtures (in ember-data)
  • Mixins



Ok, i'm convinced

But I don't want to tie down my D3 work to Ember



We'll add a loose layer 

around your existing D3 work


  • Not building an Ember charting library
    • Actually, if we were, would probably suggest something like Backbone
  • Also, there's tons of D3 code + examples out there. We should be able to incorporate these into an Ember project




So lets get started!

MOCKUp

Mockup



  • Show company revenues per month
  • Datepicker
  • 2 charts
  • Some filters

Dependencies



Ember starter kit, and

  • d3.js
  • bootstrap
  • ember-data
  • moment.js
  • bootstrap-datepicker
  • my d3 charts


scaffolding

(part 1)


Scaffolding


  • Application template is persistent
    • Datepicker will be here
    • Center panel contains {{outlet}}

Scaffolding

Application template


 <script type="text/x-handlebars">
    <div class="title">
      <h1>Ember and D3</h1>
      <h2>Scaffolding</h2>
    </div>

    <div class="content">
      <div id="left-panel" class="text-center">
        <h3>The datepicker</h3>
      </div>
      
      <div id="center-panel" class="container">
        {{outlet}}
      </div>
    </div>
  </script>

scaffolding

Index template


 <script type="text/x-handlebars" data-template-name="index">
    <h3 class='text-center muted thin'>Select a month</h3>
  </script>

App

 <script>
    App = Ember.Application.create();
  </script>



datepicker

(part 2)

datepicker

Month resource
  • Each month can be identfied by a URL

App.Router.map(function() {
    this.resource('month', { path: '/:month_id' });
});

datepicker

Models
App.Store = DS.Store.extend({
  adapter: DS.FixtureAdapter.create({ latency: 400 })
});

App.Month = DS.Model.extend({
  test: DS.attr('number'),
  companies: DS.hasMany('App.Company')
});

App.Company = DS.Model.extend({
  month: DS.belongsTo('App.Month'),
  name: DS.attr('string'),
  newContracts: DS.attr('number'),
  feeIncreases: DS.attr('number'),
  attritions: DS.attr('number'),
});
// Generate some random test data, thenApp.Month.FIXTURES = months;
App.Company.FIXTURES = companies;

datepicker


Our datepicker will need to be able to find months.

Since the datepicker lives in the ApplicationTemplate, we need to teach the ApplicationController where to look.

App.ApplicationController = Ember.Controller.extend({
    needs: ['month']
});

Datepicker

 App.DatepickerView = Ember.View.extend({
      classNames: ['dp'],
      didInsertElement: function() {
        var _this = this;

        this.$().datepicker({'format': 'M yyyy','minViewMode': 'months'})
          .on('changeDate', function(e) {
            var id = $(this).datepicker().data('date').replace(" ", "-");
            _this.get('controller').transitionToRoute(               'month', App.Month.find(id)            );
          });
        this.$('.month.active').removeClass('active');

        if (this.get('controller.controllers.month.content')) {
          this.update();
        }

      },

datepicker

Need to ensure two-way binding
In the future some other component could change the date

       update: function() {
         var month = moment(             this.get('controller.controllers.month.id') );         this.$().datepicker('hide');
         this.$().datepicker('setDate', month.toDate());
         this.$().datepicker('show');
       }.observes('controller.controllers.month.content')
    });

datepicker

Computed property on month

 App.MonthController = Ember.ObjectController.extend({
    title: function() {
        return moment(this.get('id')).format('MMMM YYYY');
    }.property('model')
 });
In our template

 <script type="text/x-handlebars" data-template-name="month">
    <h1>{{ title }}</h1>
 </script>



data from routes

(part 3)

data from routes

First of all, ajax loading
 App.LoadingRoute = Ember.Route.extend({
            renderTemplate: function() {
        if (this.controllerFor('application').get('currentPath')) {
          this.render('loading', {            into: 'application',            outlet: 'loading'          });
        } 
      }
 });

data from routes

Ajax loading
 <script type="text/x-handlebars">   ...      <div id="left-panel" class="text-center">
        <div class="loading">
          {{ outlet loading }}
        </div>
        {{view App.DatepickerView}}
      </div>
    ... </script>
 <script type="text/x-handlebars" data-template-name="loading">
    <img src="img/loading.gif">
  </script>

Data from routes

Next, the data.
Where does it come from?
CompaniesController.

App.CompaniesController = Ember.ArrayController.extend({
  data: function() {
    if (this.get('model.isLoaded')) {
      var data = this.map(function(company) {
        return {
          category: company.get('name'),
          count: company.get('newContracts'),
        };
      });
    }
    return data;
  }.property('model.isLoaded')
});

data from routes

Don't forget to teach months about companies!
(template context)

App.MonthController = Ember.ObjectController.extend({
  needs: ['companies'],
  title: function() {
    return moment(this.get('id')).format('MMMM YYYY');
  }.property('this.model')
});

data from routes

The bar graph
App.BarGraph = Ember.View.extend({
  classNames: ['chart'],

  chart: BarChart()
    .margin({left: 40, top: 40, bottom: 80, right: 40})
    .oneColor('#BE3600')
    .rotateAxisLabels(true)
    // .hideAxisLabels(true)
    // .noTicks(true)
    // .staticDataLabels(true)
    ,

  didInsertElement: function() {
    Ember.run.once(this, 'updateChart');
  },

  updateChart: function() {
    if (this.get('isLoaded')) {
      d3.select(this.$()[0])
        .data([ this.get('data') ])
        .call(this.get('chart'));
    }
  }.observes('data')

});
Where do 'isLoaded' and 'data' come from?

data from routes

The context of the template

{{view App.BarGraph 
  isLoadedBinding="controller.controllers.companies.model.isLoaded" 
  dataBinding="controller.controllers.companies.data"
}}

And now we have a reusable bar graph!

With a chart I made before I knew Ember!



data within routes

(part 4)

data within routes

First, the data
App.CompaniesController = Ember.ArrayController.extend({
  filter: 'newContracts',

  data: function() {
    if (this.get('model.isLoaded')) {
      var _this = this;

      var data = this.map(function(company) {
        return {
          category: company.get('name'),
          count: company.get( _this.get('filter') ),
        };
      });
    }
    return data;
  }.property('model.isLoaded', 'filter')
});

data within routes

Now the buttons
<ul class="nav nav-pills filters">

  {{#view App.FilterView value="newContracts"}}
  	<a>New Contracts</a>
  {{/view}}

  {{#view App.FilterView value="feeIncreases"}}
  	<a>Fee Increases</a>
  {{/view}}
  
  {{#view App.FilterView value="attritions"}}
  	<a>Attritions</a>
  {{/view}}
</ul>

data within routes

The filter view
App.FilterView = Ember.View.extend({
  tagName: 'li',
  classNameBindings: ['active'],

  active: function() {
    return this.get('controller.controllers.companies.filter') == this.get('value');
  }.property('controller.controllers.companies.filter'),

  click: function() {
    this.get('controller.controllers.companies').set('filter', this.get('value'));
  }
});

data within routes

That's it! Everything else works!
With Ember, your app scales - complexity doesn't

Some considerations:
  • We added the filters separate from the chart
    • Could be together under one parent view
  • All data driven from controller
    • Promotes data sharing + performance gains
    • ..but if too many views from one controller, could make a case that some of the data manipulation should be on the view



Flexibility

(part 5)

flexibility

Create the pie chart
 App.PieGraph = Ember.View.extend({
  classNames: ['chart'],

  chart: PieChart()
    .oneColor('#BE3600')
    .labelColor('white')
    .labelSize('11px')
    // .margin({left: 40, top: 40, bottom: 50, right: 40})
    // .hideAxisLabels(true)
    // .noTicks(true)
    // .staticDataLabels(true)
    ,

  didInsertElement: function() {
    Ember.run.once(this, 'updateChart');
  },

  updateChart: function() {
    if (this.get('isLoaded')) {

      d3.select(this.$()[0])
        .data([ this.get('data') ])
        .call(this.get('chart'));
    }
  }.observes('data')
});

flexibility

Add it to the template

{{view App.PieGraph 
  isLoadedBinding="controller.controllers.companies.model.isLoaded" 
  dataBinding="controller.controllers.companies.data"
}}

All done!


Other things to explore


  • Mixins - ways to add properties to classes
    • resizable
    • draggable
    • sortable
  • Components
    • isolated view elements
  • Base/generic views
    • E.g., I see a base class for the bar/pie charts


That's all for now!


questions?


SAM SELIKOFF

www.samselikoff.com
@samselikoff

Ember and D3 - Aug 2013

By Sam Selikoff

Made with Slides.com

Ember and D3 - Aug 2013

  • 10,133

More from Sam Selikoff