A simple graph view for [D3.js](http://d3js.org/)

Graph View

Graph View

GraphView.d3.js

var GraphView               = function(d3View) {
  var my                    = this;

  // P R I V A T E   V A R S

  var dataList              = [];
  // x-values
  var x                     = {
    axis                    : null,
    scale                   : null,
    numTicks                : 5
  };
  // y-values
  var y                     = {
    axis                    : null,
    scale                   : null,
    numTicks                : 5
  };

  // line-values
  var linePath              = null;
  var lineFunc              = null;

  var dimens                = {
    width                   : 1000,
    height                  : 500,
    paddingTop              : 20,
    paddingBottom           : 20,
    paddingLeft             : 50,
    paddingRight            : 20
  };

  var animationDuration     = 250; // millis
  
  
  var CONSTANTS             = {
    MINS_AGO                : 3     // used for x-axis date
  };

  var UTILS                 = {
    now                     : function() {
      return new Date();
    },
    millisFromNow           : function(millis) {
      return new Date(UTILS.now().getTime() + millis);      
    },
    millisInFuture          : function(millis) {
      return UTILS.millisFromNow(millis);
    },
    millisInPast            : function(millis) {
      return UTILS.millisFromNow(-millis);
    }
  };

  // I N I T I A L I Z E
  var init                  = function() {
    // define drawable area in scales
    x.scale                 = d3.time.scale().range([getBeginX(), getEndX()]);
    y.scale                 = d3.scale.linear().range([getBeginY(), getEndY()]);

    x.axis                  = d3.svg.axis().scale(x.scale).orient("bottom").ticks(x.numTicks);
    y.axis                  = d3.svg.axis().scale(y.scale).orient("left").ticks(y.numTicks);

    lineFunc                = d3.svg.line()
                                    .x(function(d) { return x.scale(d.date); })
                                    .y(function(d) { return y.scale(d.value);  })
                                    .interpolate("linear");

    // create views
    d3View                  = d3View.append('svg')
                                        .attr("width", dimens.width)
                                        .attr("height", dimens.height);

    x.axis.view             = d3View.append('g')
                                    .attr('class', 'x axis')
                                    .attr("transform", "translate(0," + getBeginY() + ")")
                                    .call(x.axis);

    y.axis.view             = d3View.append('g')
                                    .attr('class', 'y axis')
                                    .attr("transform", "translate("+ getBeginX() + ", 0)")
                                    .call(y.axis);


    linePath                = d3View.append('g')
                                    .append('path')
                                    .attr('class', 'group')
                                    .attr('class', 'line');
  };

  // P U B L I C
  my.addData                = function (data) {
    // data === { date: someDate, value : someNumberValue }
    dataList.push(data);
    draw();
  };


  // P R I V A T E

  // x-values
  var getBeginX             = function() {
    return dimens.paddingLeft;
  };
  var getEndX               = function() {
    return dimens.width - dimens.paddingRight;
  };
  var getWidth              = function() {
    return dimens.width - dimens.paddingRight - dimens.paddingLeft;
  };
  var getXValueRange        = function() {
    // start of x-range is ONSTANTS.MINS_AGO, and end is NOW
    return [UTILS.millisInPast(CONSTANTS.MINS_AGO * 60 * 1000), UTILS.now()];
  };
  // y-values
  var getBeginY             = function() {
    return dimens.height - dimens.paddingBottom;
  };
  var getEndY               = function() {
    return dimens.paddingTop;
  };
  var getYValueRange        = function() {
    // start of y-range is 0, end is max value found in data list
    return [0, d3.max(dataList, function(d) { return d.value; })];
  };
  var getHeight             = function() {
    return dimens.height - dimens.paddingTop - dimens.paddingBottom;
  };
  // updates
  var draw                  = function() {
    // update value domains on scale
    x.scale.domain(getXValueRange());
    y.scale.domain(getYValueRange());



    // Slide x-axis left
    x.axis.view
        .transition()
        .duration(animationDuration)
        .ease('linear')
        .call(x.axis);

    // Slide y-axis left
    y.axis.view
        .transition()
        .duration(animationDuration)
        .ease('linear')
        .call(y.axis);

    // update line path
    linePath.transition()
            .ease("linear")
            .duration(animationDuration)
            .attr("d", lineFunc(dataList));
  };


  init();

  return my;
};