01.mobile.test.js

mobile: function() {
  return 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 Modernizr.mq("only all and (max-width: 480px)");
    },
    tablet: function() {
      return Modernizr.mq("only all and (min-width: 481px) and (max-width: 768px)");
    },
    web: function() {
      return 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 modeData = {
        mobile: {???},
        tablet: {width: 10, height: 10},
        web: {width: 50, height: 50}
      };
      var mode = chart.mode();
      var data = modeData[mode];
      var chart = this.chart();
      this.attr("width", data.width)
        .attr("height", data.height)
        .style("fill", "blue")
        .style("opacity", "0.5")
        .attr("x", chart.xScale)
        .attr("y", chart.height() / 2);
    }
  }
});