text: var AmpersandView = require('ampersand-view'),
      VizView = require('./viz'),
      EmptyView = require('./empty'),
      d3 = require('d3'),
      $ = require('jquery'),
      debug = require('debug')('view:chart');
  
  var ChartView = module.exports = AmpersandView.extend({
    props: {
      vizView: {
        type: 'any',
        default: null
      },
      emptyView: {
        type: 'any',
        default: null
      },
      activeView: {
        type: 'string',
        default: 'empty',
        values: ['empty', 'viz']
      }
    },
    template: require('./templates/chart.jade'),
    bindings: {
      'activeView': {
        type: 'switch',
        cases: {
          'empty': '[data-hook=empty]',
          'viz'  : '[data-hook=graph]'
        }
      }
    },
    render: function () {
  
      this.activeView = this.model.empty ? 'empty' : 'viz';
  
      // first time, render view and create both subviews
      if (!this.vizView) {
        this.renderWithTemplate(this.model);
  
        this.vizView = new VizView({
          width: 'auto',
          height: 600,
          renderMode: 'svg',
          className: 'multiline',
          debounceRender: false,
          vizFn: require('./viz/d3-multiline'),
          data: {
            series: this.model.series.filter(function (s) { return s.selected; }),
            model: this.model
          }
        });
        this.emptyView = new EmptyView();
  
        this.renderSubview(this.emptyView, '[data-hook=empty]');
        this.renderSubview(this.vizView, '[data-hook=graph]');
      } else {
        this.vizView.data = {
          series: this.model.series.filter(function (s) { return s.selected; }),
          model: this.model
        };
        this.vizView.redraw();
      }
    }
  });
  