Reusable line chart using d3.chart

d3.linechart.js

function getter(attr, scale) {
  return function(d) {
    return scale ? scale(d[attr]) : d[attr]
  }
}

var defaults = {
  width: 560,
  height: 250,
  x: 'x',
  y: 'y'
}

d3.chart("LineChart", {
  initialize: function(opts) {
    var chart = this;

    chart.w = this.base.attr("width") || opts.width || defaults.width;
    chart.h = this.base.attr("height") || opts.height || defaults.height;

    chart.x_attr = opts && 'x' in opts ? opts.x : defaults.x;
    chart.y_attr = opts && 'y' in opts ? opts.y : defaults.y;

    chart.xScale = d3.scale.linear();
    chart.yScale = d3.scale.linear();

    var chartBase = this.base.append("g");
    var line = d3.svg.line()
        .x(getter(chart.x_attr, chart.xScale))
        .y(getter(chart.y_attr, chart.yScale))

    chart.layer("line", chartBase, {
      dataBind: function(data) {
        var x_bounds = d3.extent(data, getter(chart.x_attr));
        var y_bounds = d3.extent(data, getter(chart.y_attr)).reverse();

        chart.xScale.domain(x_bounds).range([0, chart.width()]);
        chart.yScale.domain(y_bounds).range([0, chart.height()]);

        return this.selectAll("path").data([data]);
      },
      insert: function() {
        return this.append("path")
          .attr("class", "line")
          .attr("d", line)
      }
    })
  },
  width: function(w) {
    if (arguments.length == 0) return this.w;
    this.w = w;
    return this;
  },
  height: function(h) {
    if (arguments.length == 0) return this.h;
    this.h = h;
    return this;
  }
})