d3.chart.base modes post

01.mobile.test.js

modes: {
  mobile : function() {
    // if the chart is less than 480 pixels wide or the 
    // screen is less than 480px wide
    return this.width() <= 480 || 
      Modernizr.mq("only all and (max-width: 480px)");
  },
}

02.modes.js

  // define a basic rect chart
  d3.chart("BaseChart").extend("RectChart", {
    
    modes : {
      mobile : function() {
        return this.width() <= 480 || 
          Modernizr.mq("only all and (max-width: 480px)");
      },
      tablet: function() {
        var w = this.width();
        return (w <= 768 && w >= 481) || 
          Modernizr.mq("only all and (min-width: 481px) " + 
                       "and (max-width: 768px)");
      },
      web: function() {
        return (this.width() > 768) || 
          Modernizr.mq("only all and (min-width: 769px)");
      }
    }
    
  });

03.layers.js

// add a boxes layer
this.layer("boxes", this.base.append("g"), {
  
  modes: ["web", "tablet"],
  dataBind: function(data) {
    var chart = this.chart();

    // update the x scale domain when 
    // new data comes in
    chart.xScale.domain([
      Math.min.apply(null, data),
      Math.max.apply(null, data)
    ]);

    return this.selectAll("rect")
      .data(data);
  },

  // insert semi transparent blue rectangles
  // of height and width 10.
  insert: function() {
    var chart = this.chart();
    var selection = this.append("rect");

    return selection;
  }
});

04.layer.mode.js

// add a boxes layer
this.layer("boxes", this.base.append("g"), {
  // modes, dataBind and insert...
  events: {
    merge: function() {
      var selection = this,
          chart = selection.chart(),
          mode = chart.mode();
      
      if (mode === "tablet") {
        selection.attr("width", 10)
          .attr("height", 10);
      
      } else  if (mode === "web") {
        selection.attr("width", 50)
          .attr("height", 50);
      }
      
      selection.style("fill", "blue")
        .style("opacity", "0.5");

      selection.attr("x", function(d) {
        return chart.xScale(d);
      }).attr("y", chart.height()/2);
    }
  }
});

Typo in 1st file, should start with modes not mobile