gistfile1.txt

// Relies on jQuery
var Graph = function(options) {

  var graph = {}

  graph.data = options.data
  graph.graphSelector = options.graphSelector;
  graph.barPadding = options.barPadding;
  graph.$graphElem = $(graph.graphSelector);

  graph.width = graph.$graphElem.width();
  graph.height = graph.$graphElem.height();

  graph.barWidth = graph.width / graph.data.length - graph.barPadding;

  graph.max = Math.max.apply(Math, graph.datapoints);
  graph.min = Math.min.apply(Math, graph.datapoints);

  // Done so that the bottom of the graph is always at least 0
  // TODO: extend to allow this to be an option
  if (graph.min > 0) {
    graph.min = 0;
  }

  // Makes the graph take the entire height
  // TODO: pass in scale factor in options
  graph.scale = (graph.height / (graph.max - graph.min)) / 1.05;

  // If we have negatives, we need to offset everything
  graph.xAxisHeight = graph.height - Math.abs(graph.min * graph.scale);

  graph.svg = d3.select(graph.graphSelector);

  graph.clear = function() {
    graph.svg.selectAll("*").remove();
  };

  graph.drawXAxis = function() {
    graph.svg
      .append('line')
      .attr('x1', 0)
      .attr('y1', graph.xAxisHeight)
      .attr('x2', graph.width)
      .attr('y2', graph.xAxisHeight)
      .attr("stroke-width", 2)
      .attr("stroke", "black");
  };

  // TODO: Extract anon functions into private helpers
  // TODO: Extract all graph. into args into the function
  graph.drawColumns = function() {
    graph.rects
      .append('rect')
      .attr('x', function(d, i) {
        return i * (graph.width / graph.data.length) + graph.barPadding / 2;
      })
      .attr('y', function(d) {
        if (d[1] > 0) {
          return graph.xAxisHeight - d[1] * graph.scale;
        } else {
          return graph.xAxisHeight;
        }
      })
      .attr('width', graph.barWidth)
      .attr('height', function(d) {
        return Math.abs(d[1]) * graph.scale;
      });
  };

  // TODO: Fix repetition in the drawX methods 
  graph.drawLabels = function() {
    graph.text
      .append('text')
      .text(function(d) {
        return d[0];
      })
      .attr("text-anchor", "middle")
      .attr("x", function(d, i) {
        return i * (graph.width / graph.data.length) + graph.barPadding / 2 + graph.barWidth / 2;
      })
      .attr("y", function(d) {
        if (d[1] > 0) {
          return graph.xAxisHeight - d[1] * graph.scale + 20;
        } else {
          return graph.xAxisHeight + 20;
        }
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "red");
  };

  graph.drawData = function() {
    graph.text
      .append('text')
      .text(function(d) {
        return d[0];
      })
      .attr("text-anchor", "middle")
      .attr("x", function(d, i) {
        return i * (graph.width / graph.data.length) + graph.barPadding / 2 + graph.barWidth / 2;
      })
      .attr("y", function(d) {
        if (d[1] > 0) {
          return graph.xAxisHeight - d[1] * graph.scale + 10;
        } else {
          return graph.xAxisHeight + 10;
        }
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "red");
  };

  graph.draw = function() {
    console.log("drawing")
    graph.clear();
    graph.drawXAxis();
    graph.drawColumns();
    graph.drawLabels();
    graph.drawData();
  };

  // Public helpers
  graph.datapoints = graph.data.map(function(d) {
    return d[1];
  });

  graph.labels = graph.data.map(function(d) {
    return d[0];
  });

  graph.rects = graph.svg
      .selectAll('rect')
      .data(graph.data)
      .enter();

  graph.text = graph.svg
      .selectAll("text")
      .data(graph.data)
      .enter();

  // Private helpers

  // Return the object
  return graph;
}